Hugging Face's logo

Spaces:
Gertie01
/
awesome-swift-studio
Running

App Files Community
awesome-swift-studio
File size: 4,741 Bytes 
8bd9942
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Remix images with text prompts using AI models like Gemini and GPT. Drag and drop your images into three spots for creative combinations.">
    <meta name="keywords" content="image remixer, AI art, Gemini, GPT, image generation, drag and drop, creative tool">
    <meta name="author" content="Anycoder">
    <title>AI Image Remixer</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50%' y='50%' style='dominant-baseline:central;text-anchor:middle;font-size:80px;'%3E🎨%3C/text%3E%3C/svg%3E" type="image/svg+xml">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <h1>AI Image Remixer 🎨</h1>
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank" rel="noopener noreferrer">Built with anycoder</a>
        </div>
    </header>

    <main class="container">
        <section class="upload-section">
            <h2>1. Upload or Drop Images</h2>
            <div id="upload-dropzone" class="dropzone">
                <p>Drag & drop images here, or click to upload</p>
                <input type="file" id="image-upload" accept="image/*" multiple style="display: none;">
                <button id="upload-button" class="btn">Browse Files</button>
            </div>
            <div id="uploaded-previews" class="uploaded-previews">
                <!-- Uploaded image previews will go here -->
            </div>
        </section>

        <section class="remix-spots-section">
            <h2>2. Place Images in Spots</h2>
            <p class="instruction-text">Drag images from the "Uploads" section into these three blank spots.</p>
            <div class="remix-spots">
                <div class="image-spot" id="spot-1" data-index="0">
                    <span class="spot-label">Spot 1</span>
                    <img class="spot-image" src="assets/img/placeholder.png" alt="Image spot 1">
                </div>
                <div class="image-spot" id="spot-2" data-index="1">
                    <span class="spot-label">Spot 2</span>
                    <img class="spot-image" src="assets/img/placeholder.png" alt="Image spot 2">
                </div>
                <div class="image-spot" id="spot-3" data-index="2">
                    <span class="spot-label">Spot 3</span>
                    <img class="spot-image" src="assets/img/placeholder.png" alt="Image spot 3">
                </div>
            </div>
        </section>

        <section class="prompt-model-section">
            <h2>3. Add a Prompt & Select Model</h2>
            <div class="prompt-input-group">
                <label for="text-prompt">Text Prompt:</label>
                <textarea id="text-prompt" placeholder="Describe the remix, e.g., 'A surreal landscape with elements of all three images, painted in an impressionistic style.'" rows="4"></textarea>
            </div>

            <div class="model-selection">
                <h3>Choose AI Model:</h3>
                <div class="model-options">
                    <label class="model-radio">
                        <input type="radio" name="ai-model" value="gemini-2" checked>
                        Gemini-2
                        <span class="tooltip">Advanced multimodal reasoning.</span>
                    </label>
                    <label class="model-radio">
                        <input type="radio" name="ai-model" value="gpt-image-1">
                        GPT Image-1
                        <span class="tooltip">Powerful image generation.</span>
                    </label>
                </div>
            </div>

            <button id="remix-button" class="btn btn-primary">Remix Images</button>
            <div id="status-message" class="status-message" aria-live="polite"></div>
        </section>

        <section class="result-section">
            <h2>4. Your Remixed Image</h2>
            <div id="remix-result" class="remix-result">
                <img id="result-image" src="assets/img/initial-result.png" alt="Remixed image output" style="display: none;">
                <p id="result-placeholder">Your remixed image will appear here.</p>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2023 AI Image Remixer. All rights reserved.</p>
        </div>
    </footer>

    <script src="assets/js/script.js"></script>
</body>
</html>