Hugging Face's logo

Spaces:
chansung
/
gemini-max-playground
Running

App Files Community
chansung commited on
Commit
52a2d9e
·
verified ·
1 Parent(s): 6b6e452

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +180 -18
index.html CHANGED
@@ -1,19 +1,181 @@
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="config-button" aria-label="Open Configuration" title="Open Configuration (Alt / Option + O)">
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-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>
20
+ </button>
21
+ </div>
22
+
23
+ <div id="main-content" class="p-6 flex flex-col space-y-4">
24
+ <div class="text-center mt-8">
25
+ <h1 id="main-content-title" class="text-2xl font-bold text-cyan-400">Live Previews</h1>
26
+ <h2 id="main-content-subtitle" class="text-lg font-semibold text-slate-300 mt-2">Powered by Gemini Models</h2>
27
+ <p class="mt-3 text-xs text-slate-500">
28
+ <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">Alt / Option</kbd> + <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">P</kbd> to open prompt.
29
+ <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">Alt / Option</kbd> + <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">R</kbd> to regenerate.
30
+ <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">Alt / Option</kbd> + <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">O</kbd> for settings.
31
+ </p>
32
+ <div id="error-message" class="mt-2 text-red-400 text-sm font-medium"></div>
33
+ </div>
34
+
35
+ <div id="perspective-viewport">
36
+ <div id="preview-grid-wrapper" class="grid-mode">
37
+ </div>
38
+ </div>
39
+
40
+ <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>
41
+ </div>
42
+
43
+ <div id="history-panel-controls">
44
+ <button id="history-nav-left-button" class="history-nav-button" aria-label="Previous History Step" title="Previous History (Alt + Page Up)" disabled>
45
+ <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>
46
+ </button>
47
+ <button id="history-toggle-button" aria-label="Toggle History Panel">
48
+ <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>
49
+ <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>
50
+ </button>
51
+ <button id="history-nav-right-button" class="history-nav-button" aria-label="Next History Step" title="Next History (Alt + Page Down)" disabled>
52
+ <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>
53
+ </button>
54
+ </div>
55
+
56
+ <div id="history-panel" class="history-collapsed">
57
+ <div id="history-panel-placeholder">Evolution history will appear here.</div>
58
+ </div>
59
+
60
+ <div id="refinement-loading-indicator">
61
+ <span>Refining code...</span>
62
+ <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
63
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
64
+ <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>
65
+ </svg>
66
+ </div>
67
+
68
+ <div id="fullscreen-overlay">
69
+ <div id="fullscreen-history-nav">
70
+ <button id="history-nav-prev" title="Previous History (W)">
71
+ <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>
72
+ Prev (W)
73
+ </button>
74
+ <button id="history-nav-next" title="Next History (D)">
75
+ Next (D)
76
+ <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>
77
+ </button>
78
+ </div>
79
+ <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">
80
+ <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>
81
+ Exit
82
+ </button>
83
+ <iframe id="fullscreen-iframe" title="Full Screen Preview"></iframe>
84
+ </div>
85
+
86
+ <div id="prompt-modal-overlay" class="modal-overlay">
87
+ <div id="prompt-modal-content" class="modal-content">
88
+ <h3 class="text-xl font-semibold text-cyan-300">Enter Prompt (Alt+P)</h3>
89
+ <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>
90
+
91
+ <div class="flex items-center mt-2">
92
+ <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">
93
+ <label for="modal-refinement-checkbox" class="ml-2 block text-sm text-slate-200">Use prompt to refine active evolution</label>
94
+ </div>
95
+
96
+ <div class="mt-2">
97
+ <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>
98
+ <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">
99
+ </div>
100
+
101
+ <div class="mt-2">
102
+ <label for="model-select" class="block text-sm font-medium text-slate-300 mb-1">Select Model:</label>
103
+ <select id="model-select" name="model-select" class="futuristic-select block w-full sm:text-sm">
104
+ <option value="gemini-2.5-pro-preview-05-06">gemini-2.5-pro-preview-05-06</option>
105
+ <option value="gemini-2.5-flash-preview-04-17">gemini-2.5-flash-preview-04-17</option>
106
+ <option value="gemini-2.0-flash">gemini-2.0-flash</option>
107
+ <option value="gemini-2.0-flash-lite">gemini-2.0-flash-lite</option>
108
+ </select>
109
+ </div>
110
+
111
+ <div class="mt-3">
112
+ <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>
113
+ <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">
114
+ <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>
115
+ </div>
116
+
117
+ <p class="text-xs text-slate-400 mt-1">Use Ctrl/Cmd+Enter to generate, Esc to close.</p>
118
+ <div class="flex justify-end gap-3 mt-2">
119
+ <button id="modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button>
120
+ <button id="modal-generate-button" class="futuristic-button px-4 py-2 text-sm">
121
+ Generate
122
+ <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>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <div id="config-modal-overlay" class="modal-overlay">
129
+ <div id="config-modal-content" class="modal-content">
130
+ <h3 class="text-xl font-semibold text-cyan-300">Configuration (Alt+O)</h3>
131
+
132
+ <div class="space-y-4">
133
+ <div>
134
+ <label for="api-key" class="block text-sm font-medium text-slate-300 mb-1">Gemini API Key (AI Studio):</label>
135
+ <input type="password" id="api-key" name="api-key" class="futuristic-input block w-full sm:text-sm" placeholder="Enter your API Key">
136
+ </div>
137
+
138
+ <div class="pt-1">
139
+ <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>
140
+ <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">
141
+ <p class="mt-1 text-xs text-slate-400">Min time between preview updates (higher = less frequent).</p>
142
+ </div>
143
+
144
+ <div id="code-output-container">
145
+ <div id="code-output-header">
146
+ <h3 id="selected-code-title" class="text-lg font-medium text-cyan-300 flex-shrink-0">Selected Code:</h3>
147
+ <div class="flex items-center gap-2">
148
+ <button id="copy-code-button" title="Copy Code">
149
+ <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>
150
+ </button>
151
+ <button id="export-code-button" title="Export Code as ZIP">
152
+ <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>
153
+ </button>
154
+ </div>
155
+ </div>
156
+ <div class="flex-grow overflow-hidden min-h-0 flex">
157
+ <pre id="code-output" class="h-full"><code class="language-html">// Select a variation or history item to view its code.</code></pre>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="flex justify-end gap-3 mt-4">
163
+ <button id="config-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div id="confirm-modal-overlay" class="modal-overlay">
169
+ <div id="confirm-modal-content" class="modal-content max-w-md">
170
+ <h3 class="text-xl font-semibold text-cyan-300">Confirm Action</h3>
171
+ <p id="confirm-modal-message" class="text-sm text-slate-300">Are you sure?</p>
172
+ <div class="flex justify-end gap-3 mt-4">
173
+ <button id="confirm-modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button>
174
+ <button id="confirm-modal-confirm-button" class="futuristic-button px-4 py-2 text-sm bg-red-600 hover:bg-red-700">Confirm</button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <script src="script.js"></script>
180
+ </body>
181
  </html>