Hugging Face's logo

Spaces:
chansung
/
gemini-max-playground-mobile
Running

App Files Community
chansung commited on
Commit
c128c05
·
verified ·
1 Parent(s): 80424a3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +217 -19
index.html CHANGED
@@ -1,19 +1,217 @@
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" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gemini Code Generator & Preview (Config Modal)</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
9
+ <link rel="preconnect" href="https://rsms.me/">
10
+ <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body class="font-sans">
14
+ <div id="top-left-controls">
15
+ <button id="new-button" aria-label="New Session" title="Start New Session (Refresh)">
16
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
17
+ </button>
18
+ <button id="show-prompt-modal-button" aria-label="Open Prompt Modal" title="Open Prompt (Alt / Option + P)">
19
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
20
+ </button>
21
+ <button id="config-button" aria-label="Open Configuration" title="Open Configuration (Alt / Option + O)">
22
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
23
+ </button>
24
+ </div>
25
+
26
+ <div id="main-content" class="p-6 flex flex-col space-y-4">
27
+ <div class="text-center mt-8">
28
+ <h1 id="main-content-title" class="text-2xl font-bold text-cyan-400">Live Previews</h1>
29
+ <h2 id="main-content-subtitle" class="text-base font-semibold text-slate-300 mt-2">Powered by Gemini Models</h2>
30
+
31
+ <div id="error-message" class="mt-2 text-red-400 text-sm font-medium"></div>
32
+ </div>
33
+
34
+ <div id="initial-setup-cta" class="hidden flex-col items-center justify-center text-slate-300 text-lg p-4 space-y-6">
35
+ <!-- This div will be shown by script.js in the initial state -->
36
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Google_Gemini_logo.svg/2560px-Google_Gemini_logo.svg.png" alt="Gemini Logo" id="gemini-logo-initial-cta">
37
+ <div class="w-full flex justify-center">
38
+ <input type="password" id="initial-api-key-input" class="futuristic-input w-[70%] text-sm" placeholder="Enter your Gemini API Key">
39
+ </div>
40
+ <div class="w-full flex justify-center text-center">
41
+ <p class="text-xs text-slate-400 mt-1">
42
+ <a href="https://ai.studio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" class="text-cyan-400 hover:text-cyan-300 underline">
43
+ Get your Gemini API Key from Google AI Studio
44
+ </a>
45
+ </p>
46
+ </div>
47
+ <div id="example-prompts-container" class="flex flex-col items-center gap-3">
48
+ </div>
49
+ <p class="mt-4 text-sm text-slate-500">Once you have an API key and a prompt (either typed or from an example),<br>click the pencil icon or press Alt+P to open the prompt window and generate.</p>
50
+ </div>
51
+
52
+ <button id="variation-nav-left" class="variation-nav-button fixed left-2 top-1/2 -translate-y-1/2 z-50 hidden" aria-label="Scroll Left" title="Scroll Left">
53
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>
54
+ </button>
55
+
56
+ <div id="perspective-viewport">
57
+ <div id="preview-grid-wrapper" class="mobile-preview-layout">
58
+ <!-- Content will be dynamically inserted here by script.js -->
59
+ </div>
60
+ </div>
61
+
62
+ <button id="variation-nav-right" class="variation-nav-button fixed right-2 top-1/2 -translate-y-1/2 z-50 hidden" aria-label="Scroll Right" title="Scroll Right">
63
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>
64
+ </button>
65
+
66
+ <p class="mt-2 text-xs text-slate-500 flex-shrink-0 text-center">Note: Some JS/external resources might be restricted by the sandbox.</p>
67
+ </div>
68
+
69
+ <div id="history-panel-controls">
70
+ <button id="history-nav-left-button" class="history-nav-button" aria-label="Previous History Step" title="Previous History (Alt + Page Up)" disabled>
71
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>
72
+ </button>
73
+ <button id="history-toggle-button" aria-label="Toggle History Panel">
74
+ <svg id="history-arrow-down" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down hidden"><path d="m6 9 6 6 6-6"/></svg>
75
+ <svg id="history-arrow-up" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>
76
+ </button>
77
+ <button id="history-nav-right-button" class="history-nav-button" aria-label="Next History Step" title="Next History (Alt + Page Down)" disabled>
78
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>
79
+ </button>
80
+ </div>
81
+
82
+ <div id="history-panel" class="history-collapsed">
83
+ <div id="history-panel-placeholder">Evolution history will appear here.</div>
84
+ </div>
85
+
86
+ <div id="refinement-loading-indicator">
87
+ <span>Refining code...</span>
88
+ <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
89
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
90
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
91
+ </svg>
92
+ </div>
93
+
94
+ <div id="fullscreen-overlay">
95
+ <div id="fullscreen-history-nav">
96
+ <button id="history-nav-prev" title="Previous History (W)">
97
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block mr-1"><polyline points="15 18 9 12 15 6"></polyline></svg>
98
+ Prev (W)
99
+ </button>
100
+ <button id="history-nav-next" title="Next History (D)">
101
+ Next (D)
102
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block ml-1"><polyline points="9 18 15 12 9 6"></polyline></svg>
103
+ </button>
104
+ </div>
105
+ <button id="exit-fullscreen-btn" class="px-3 py-1 text-sm font-medium rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 focus:ring-offset-slate-900" title="Exit Full Screen">
106
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="inline-block mr-1 -mt-px"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
107
+ Exit
108
+ </button>
109
+ <iframe id="fullscreen-iframe" title="Full Screen Preview"></iframe>
110
+ </div>
111
+
112
+ <div id="prompt-modal-overlay" class="modal-overlay">
113
+ <div id="prompt-modal-content" class="modal-content">
114
+ <h3 class="text-xl font-semibold text-cyan-300">Enter Prompt (Alt+P)</h3>
115
+ <textarea id="modal-user-prompt" rows="6" class="futuristic-input block w-full px-3 py-2 sm:text-sm" placeholder="Describe the web page/app to build or refine..."></textarea>
116
+
117
+ <div class="flex items-center mt-2">
118
+ <input id="modal-refinement-checkbox" name="modal-refinement-checkbox" type="checkbox" class="h-4 w-4 text-cyan-500 focus:ring-cyan-400 border-slate-600 rounded bg-slate-700 focus:ring-offset-slate-800">
119
+ <label for="modal-refinement-checkbox" class="ml-2 block text-sm text-slate-200">Use prompt to refine active evolution</label>
120
+ </div>
121
+
122
+ <div class="mt-2">
123
+ <label for="num-variations-slider" class="block text-sm font-medium text-slate-300 mb-1">Number of Variations: <span id="num-variations-value">4</span></label>
124
+ <input type="range" id="num-variations-slider" name="num-variations-slider" min="1" max="4" step="1" value="4" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer">
125
+ </div>
126
+
127
+ <div class="mt-2">
128
+ <label for="model-select" class="block text-sm font-medium text-slate-300 mb-1">Select Model:</label>
129
+ <select id="model-select" name="model-select" class="futuristic-select block w-full sm:text-sm">
130
+ <option value="gemini-2.5-pro-preview-05-06">gemini-2.5-pro-preview-05-06</option>
131
+ <option value="gemini-2.5-flash-preview-04-17">gemini-2.5-flash-preview-04-17</option>
132
+ <option value="gemini-2.0-flash">gemini-2.0-flash</option>
133
+ <option value="gemini-2.0-flash-lite">gemini-2.0-flash-lite</option>
134
+ </select>
135
+ </div>
136
+
137
+ <div class="mt-3">
138
+ <label for="modal-thinking-budget-slider" class="block text-sm font-medium text-slate-300 mb-1">Thinking Budget: <span id="modal-thinking-budget-value">0</span></label>
139
+ <input type="range" id="modal-thinking-budget-slider" name="modal-thinking-budget-slider" min="0" max="24576" step="1024" value="0" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer">
140
+ <p class="mt-1 text-xs text-slate-400">Set to 0 to disable. Higher values may improve quality for complex prompts but increase latency.</p>
141
+ </div>
142
+
143
+ <p class="text-xs text-slate-400 mt-1">Use Ctrl/Cmd+Enter to generate, Esc to close.</p>
144
+ <div class="flex justify-end gap-3 mt-2">
145
+ <button id="modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button>
146
+ <button id="modal-generate-button" class="futuristic-button px-4 py-2 text-sm">
147
+ Generate
148
+ <svg id="modal-loading-indicator" class="animate-spin -mr-1 ml-3 h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div id="config-modal-overlay" class="modal-overlay">
155
+ <div id="config-modal-content" class="modal-content">
156
+ <h3 class="text-xl font-semibold text-cyan-300">Configuration (Alt+O)</h3>
157
+
158
+ <div class="space-y-4">
159
+ <div>
160
+ <label for="api-key" class="block text-sm font-medium text-slate-300 mb-1">Gemini API Key (AI Studio):</label>
161
+ <input type="password" id="api-key" name="api-key" class="futuristic-input block w-full sm:text-sm" placeholder="Enter your API Key">
162
+ </div>
163
+
164
+ <div class="pt-1">
165
+ <label for="preview-interval-slider" class="block text-sm font-medium text-slate-300 mb-1">Live Preview Update Interval: <span id="interval-value">500</span>ms</label>
166
+ <input type="range" id="preview-interval-slider" name="preview-interval-slider" min="100" max="2000" step="100" value="500" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer">
167
+ <p class="mt-1 text-xs text-slate-400">Min time between preview updates (higher = less frequent).</p>
168
+ </div>
169
+
170
+ <div id="code-output-container">
171
+ <div id="code-output-header">
172
+ <h3 id="selected-code-title" class="text-lg font-medium text-cyan-300 flex-shrink-0">Selected Code:</h3>
173
+ <div class="flex items-center gap-2">
174
+ <button id="copy-code-button" title="Copy Code">
175
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
176
+ </button>
177
+ <button id="export-code-button" title="Export Code as ZIP">
178
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
179
+ </button>
180
+ </div>
181
+ </div>
182
+ <div class="flex-grow overflow-hidden min-h-0 flex">
183
+ <pre id="code-output" class="h-full"><code class="language-html">// Select a variation or history item to view its code.</code></pre>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="flex justify-end gap-3 mt-4">
189
+ <button id="config-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <div id="confirm-modal-overlay" class="modal-overlay">
195
+ <div id="confirm-modal-content" class="modal-content max-w-md">
196
+ <h3 class="text-xl font-semibold text-cyan-300">Confirm Action</h3>
197
+ <p id="confirm-modal-message" class="text-sm text-slate-300">Are you sure?</p>
198
+ <div class="flex justify-end gap-3 mt-4">
199
+ <button id="confirm-modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button>
200
+ <button id="confirm-modal-confirm-button" class="futuristic-button px-4 py-2 text-sm bg-red-600 hover:bg-red-700">Confirm</button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <div id="prompt-display-modal-overlay" class="modal-overlay">
206
+ <div id="prompt-display-modal-content" class="modal-content max-w-2xl">
207
+ <h3 class="text-xl font-semibold text-cyan-300 mb-2">Full Prompt</h3>
208
+ <pre id="full-prompt-text" class="text-sm text-slate-300 whitespace-pre-wrap break-words bg-slate-800 p-3 rounded border border-slate-600 max-h-96 overflow-y-auto"></pre>
209
+ <div class="flex justify-end gap-3 mt-4">
210
+ <button id="prompt-display-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <script src="script.js"></script>
216
+ </body>
217
+ </html>