Hugging Face's logo

Spaces:
imseldrith
/
Imagine
Sleeping

App Files Community
imseldrith commited on
Commit
b22c3ed
•
1 Parent(s): 3d5fdc4

Create index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +152 -0
templates/index.html ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Image Generator</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
7
+ <style>
8
+ body {
9
+ background-color: #f5f5f5;
10
+ }
11
+
12
+ .container {
13
+ max-width: 600px;
14
+ margin: 0 auto;
15
+ padding: 40px;
16
+ background-color: #ffffff;
17
+ border-radius: 10px;
18
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
19
+ }
20
+
21
+ h1 {
22
+ text-align: center;
23
+ margin-bottom: 30px;
24
+ color: #333333;
25
+ font-weight: 600;
26
+ letter-spacing: 1px;
27
+ }
28
+
29
+ label {
30
+ font-weight: bold;
31
+ margin-bottom: 10px;
32
+ color: #555555;
33
+ }
34
+
35
+ textarea,
36
+ select {
37
+ width: 100%;
38
+ padding: 12px;
39
+ border-radius: 5px;
40
+ border: 1px solid #dddddd;
41
+ font-size: 16px;
42
+ margin-bottom: 20px;
43
+ color: #555555;
44
+ background-color: #f9f9f9;
45
+ }
46
+
47
+ button[type="submit"] {
48
+ background-color: #ff3366;
49
+ color: #ffffff;
50
+ padding: 12px 24px;
51
+ border: none;
52
+ border-radius: 5px;
53
+ cursor: pointer;
54
+ font-size: 16px;
55
+ transition: background-color 0.3s ease;
56
+ }
57
+
58
+ button[type="submit"]:hover {
59
+ background-color: #cc0052;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div class="container">
65
+ <h1 class="mt-5">Image Generator</h1>
66
+ <form action="/generate" method="POST">
67
+ <div class="mb-3">
68
+ <label for="prompt" class="form-label">Prompt:</label>
69
+ <textarea id="prompt" name="prompt" class="form-control" rows="4" cols="50"></textarea>
70
+ </div>
71
+ <div class="mb-3">
72
+ <label for="style" class="form-label">Choose Style:</label>
73
+ <select id="style" name="style" class="form-select">
74
+
75
+ <option value="IMAGINE_V4_Beta">IMAGINE_V4_Beta</option>
76
+ <option value="IMAGINE_V3">IMAGINE_V3</option>
77
+ <option value="IMAGINE_V1">IMAGINE_V1</option>
78
+ <option value="ANIME_V2">ANIME_V2</option>
79
+ <option value="PORTRAIT">PORTRAIT</option>
80
+ <option value="REALISTIC">REALISTIC</option>
81
+ <option value="ANIME">ANIME</option>
82
+ <option value="COSMIC">COSMIC</option>
83
+ <option value="COMIC_V2">COMIC_V2</option>
84
+ <option value="MARBLE">MARBLE</option>
85
+ <option value="MINECRAFT">MINECRAFT</option>
86
+ <option value="DISNEY">DISNEY</option>
87
+ <option value="MACRO_PHOTOGRAPHY">MACRO_PHOTOGRAPHY</option>
88
+ <option value="GTA">GTA</option>
89
+ <option value="STUDIO_GHIBLI">STUDIO_GHIBLI</option>
90
+ <option value="DYSTOPIAN">DYSTOPIAN</option>
91
+ <option value="STAINED_GLASS">STAINED_GLASS</option>
92
+ <option value="PRODUCT_PHOTOGRAPHY">PRODUCT_PHOTOGRAPHY</option>
93
+ <option value="PSYCHEDELIC">PSYCHEDELIC</option>
94
+ <option value="SURREALISM">SURREALISM</option>
95
+ <option value="GRAFFITI">GRAFFITI</option>
96
+ <option value="GHOTIC">GHOTIC</option>
97
+ <option value="RAINBOW">RAINBOW</option>
98
+ <option value="AVATAR">AVATAR</option>
99
+ <option value="PALETTE_KNIFE">PALETTE_KNIFE</option>
100
+ <option value="CANDYLAND">CANDYLAND</option>
101
+ <option value="CLAYMATION">CLAYMATION</option>
102
+ <option value="EUPHORIC">EUPHORIC</option>
103
+ <option value="MEDIEVAL">MEDIEVAL</option>
104
+ <option value="ORIGAMI">ORIGAMI</option>
105
+ <option value="POP_ART">POP_ART</option>
106
+ <option value="POP_ART_2">POP_ART_2</option>
107
+ <option value="PATTERN">PATTERN</option>
108
+ <option value="CHROMATIC">CHROMATIC</option>
109
+ <option value="CLIP_ART">CLIP_ART</option>
110
+ <option value="RENAISSANCE">RENAISSANCE</option>
111
+ <option value="FANTASY">FANTASY</option>
112
+ <option value="EXTRA_TERRESTRIAL">EXTRA_TERRESTRIAL</option>
113
+ <option value="WOOLITIZE">WOOLITIZE</option>
114
+ <option value="NEO_FAUVISM">NEO_FAUVISM</option>
115
+ <option value="AMAZONIAN">AMAZONIAN</option>
116
+ <option value="SHAMROCK_FANTASY">SHAMROCK_FANTASY</option>
117
+ <option value="ABSTRACT_VIBRANT">ABSTRACT_VIBRANT</option>
118
+ <option value="NEON">NEON</option>
119
+ <option value="CUBISM">CUBISM</option>
120
+ <option value="BAUHAUS">BAUHAUS</option>
121
+ <option value="ROCOCCO">ROCOCCO</option>
122
+ <option value="HAUNTED">HAUNTED</option>
123
+ <option value="LOGO">LOGO</option>
124
+ <option value="WATERBENDER">WATERBENDER</option>
125
+ <option value="FIREBENDER">FIREBENDER</option>
126
+ <option value="EARTHBENDER (EXPERIMENTAL)">EARTHBENDER (EXPERIMENTAL)</option>
127
+ <option value="AIRBENDER (EXPERIMENTAL)">AIRBENDER (EXPERIMENTAL)</option>
128
+ <option value="METALBENDER (EXPERIMENTAL)">METALBENDER (EXPERIMENTAL)</option>
129
+ <option value="BLOODBENDER (EXPERIMENTAL)">BLOODBENDER (EXPERIMENTAL)</option>
130
+ <option value="LIGHTNINGBENDER (EXPERIMENTAL)">LIGHTNINGBENDER (EXPERIMENTAL)</option>
131
+ <option value="SPIRITBENDER (EXPERIMENTAL)">SPIRITBENDER (EXPERIMENTAL)</option>
132
+ <option value="LAVABENDER (EXPERIMENTAL)">LAVABENDER (EXPERIMENTAL)</option>
133
+ <option value="WATERHEALER (EXPERIMENTAL)">WATERHEALER (EXPERIMENTAL)</option>
134
+ </select>
135
+ </div>
136
+ <div class="mb-3">
137
+ <label for="ratio" class="form-label">Choose Ratio:</label>
138
+ <select id="ratio" name="ratio" class="form-select">
139
+ <option value="RATIO_1X1">1:1</option>
140
+ <option value="RATIO_9X16">9:16</option>
141
+ <option value="RATIO_16X9">16:9</option>
142
+ <option value="RATIO_4X3">4:3</option>
143
+ <option value="RATIO_3X2">3:2</option>
144
+ </select>
145
+ </div>
146
+ <button type="submit" class="btn btn-primary">Generate Image</button>
147
+ </form>
148
+ </div>
149
+
150
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
151
+ </body>
152
+ </html>