Hugging Face's logo

Spaces:
Prav51
/
text-to-image-hf-playground
Running

App Files Community
1
Prav51 commited on
Commit
45fbf9e
•
1 Parent(s): ddf3d4e

index.html code setup done

Browse files
Files changed (1) hide show
  1. index.html +151 -1
index.html CHANGED
@@ -1,7 +1,157 @@
1
  <!doctype html>
2
  <html>
3
  <head>
4
- <meta charset="utf-8" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  <meta name="viewport" content="width=device-width" />
6
  <title>My static Space</title>
7
  <link rel="stylesheet" href="style.css" />
 
1
  <!doctype html>
2
  <html>
3
  <head>
4
+ <meta charset="utf-8"<!DOCTYPE html>
5
+ <html lang="en">
6
+ <head>
7
+ <meta charset="UTF-8" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
+ <title>Text to Img</title>
10
+
11
+ <link
12
+ rel="stylesheet"
13
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
14
+ integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
15
+ crossorigin="anonymous"
16
+ referrerpolicy="no-referrer"
17
+ />
18
+
19
+ <!-- =========================fonts========================= -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
22
+ <link
23
+ href="https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100..900;1,100..900&display=swap"
24
+ rel="stylesheet"
25
+ />
26
+
27
+ <link rel="stylesheet" href="styles.css" />
28
+ </head>
29
+ <body>
30
+ <div class="container">
31
+ <div class="form-container">
32
+ <div class="logo">
33
+ <i
34
+ class="fa-solid fa-draw-polygon"
35
+ style="font-size: 3rem; color: blueviolet"
36
+ ></i>
37
+
38
+ <h1>Text to Image</h1>
39
+ </div>
40
+ <label for="text">Create an image from text</label>
41
+ <input type="text" id="text" />
42
+
43
+ <label for="token"
44
+ >Enter API Token:
45
+ <span class="hint-icon" id="hint-icon"
46
+ ><i class="fas fa-question-circle"></i
47
+ ></span>
48
+ </label>
49
+
50
+ <div class="input-with-icon">
51
+ <input type="password" id="token" />
52
+ <span class="toggle-password" id="toggle-password">
53
+ <i class="fa fa-eye-slash" aria-hidden="true"></i>
54
+ </span>
55
+ </div>
56
+
57
+ <div class="hint-content" id="hint-content">
58
+ <h5>Get your API token from Hugging Face:</h5>
59
+ <br />
60
+ <ol>
61
+ <li>
62
+ <p>Sign up or log into your Hugging Face account.</p>
63
+ </li>
64
+ <li><p>Go to your account settings or dashboard.</p></li>
65
+ <li>
66
+ <p>Find the API tokens section and generate a new token.</p>
67
+ </li>
68
+ <li>
69
+ <p>Copy the token and paste it into the input field above.</p>
70
+ </li>
71
+ </ol>
72
+ </div>
73
+
74
+ <label for="chooseModel"
75
+ >Select a Model:
76
+ <span class="hint-icon" id="model-hint-icon"
77
+ ><i class="fas fa-question-circle"></i
78
+ ></span>
79
+ </label>
80
+ <select id="chooseModel">
81
+ <option value="Melonie/text_to_image_finetuned">
82
+ Melonie/text_to_image_finetuned
83
+ </option>
84
+ <option value="mann-e/Mann-E_Dreams">mann-e/Mann-E_Dreams</option>
85
+
86
+ <option value="alvdansen/midsommarcartoon">
87
+ alvdansen/midsommarcartoon
88
+ </option>
89
+ </select>
90
+
91
+ <!-- keep same class for same style, only have different id -->
92
+ <div class="hint-content" id="model-hint-content">
93
+ <div id="model-info">
94
+ <h5>Model info:</h5>
95
+ <p id="model-info-text"></p>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- test only -->
100
+ <button onclick="showHistory()">histry</button>
101
+ <!--<button
102
+ onclick="addToHistory('https://tse3.explicit.bing.net/th?id=OIP.iC2nXJ8sgDXaO8xp3X3izAHaE6&pid=Api&P=0&h=180')"
103
+ >
104
+ add to history
105
+ </button> -->
106
+ <div
107
+ style="
108
+ display: flex;
109
+ justify-content: space-around;
110
+ align-items: center;
111
+ gap: 20px;
112
+ "
113
+ >
114
+ <button id="btn" class="primary-btn">Generate</button>
115
+ <button id="downloadBtn" class="hidden">Download Image</button>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="result-container">
120
+ <div id="loader" class="hidden"></div>
121
+ <img src="" alt="" id="img" />
122
+
123
+ <div id="history">
124
+ <div id="history-header">
125
+ <h3>History<span class="snakex">.</span></h3>
126
+
127
+ <button
128
+ class="saveHistory primary-btn"
129
+ onclick="imageHistoryInstance.saveToLocalStorage()"
130
+ >
131
+ Save History
132
+ </button>
133
+
134
+ <button
135
+ class="clearHistory secondary-btn"
136
+ onclick="imageHistoryInstance.clearHistory()"
137
+ >
138
+ Clear History
139
+ </button>
140
+ </div>
141
+
142
+ <div id="history-container"></div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <script src="_api.js"></script>
147
+ <script src="_dom.js"></script>
148
+ <script src="myClasses.js"></script>
149
+ <script src="_helpers.js"></script>
150
+ <script src="_events.js"></script>
151
+ <script src="main.js"></script>
152
+ </body>
153
+ </html>
154
+ />
155
  <meta name="viewport" content="width=device-width" />
156
  <title>My static Space</title>
157
  <link rel="stylesheet" href="style.css" />