Hugging Face's logo

Spaces:
chansung
/
novita-preview-playground
Running

App Files Community
chansung commited on
Commit
1eeef20
·
verified ·
1 Parent(s): 8119631

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +201 -19
index.html CHANGED
@@ -1,19 +1,201 @@
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 Open Models from Novita.AI Model API</h2>
30
+
31
+ <div id="error-message" class="mt-2 text-red-400 text-sm font-medium"></div>
32
+ </div>
33
+
34
+ <div id="perspective-viewport">
35
+ <div id="preview-grid-wrapper" class="grid-mode">
36
+ </div>
37
+ </div>
38
+
39
+ <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>
40
+ </div>
41
+
42
+ <div id="history-panel-controls">
43
+ <button id="history-nav-left-button" class="history-nav-button" aria-label="Previous History Step" title="Previous History (Alt + Page Up)" disabled>
44
+ <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>
45
+ </button>
46
+ <button id="history-toggle-button" aria-label="Toggle History Panel">
47
+ <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>
48
+ <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>
49
+ </button>
50
+ <button id="history-nav-right-button" class="history-nav-button" aria-label="Next History Step" title="Next History (Alt + Page Down)" disabled>
51
+ <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>
52
+ </button>
53
+ </div>
54
+
55
+ <div id="history-panel" class="history-collapsed">
56
+ <div id="history-panel-placeholder">Evolution history will appear here.</div>
57
+ </div>
58
+
59
+ <div id="refinement-loading-indicator">
60
+ <span>Refining code...</span>
61
+ <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
62
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
63
+ <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>
64
+ </svg>
65
+ </div>
66
+
67
+ <div id="fullscreen-overlay">
68
+ <div id="fullscreen-history-nav">
69
+ <button id="history-nav-prev" title="Previous History (W)">
70
+ <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>
71
+ Prev (W)
72
+ </button>
73
+ <button id="history-nav-next" title="Next History (D)">
74
+ Next (D)
75
+ <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>
76
+ </button>
77
+ </div>
78
+ <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">
79
+ <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>
80
+ Exit
81
+ </button>
82
+ <iframe id="fullscreen-iframe" title="Full Screen Preview"></iframe>
83
+ </div>
84
+
85
+ <div id="prompt-modal-overlay" class="modal-overlay">
86
+ <div id="prompt-modal-content" class="modal-content">
87
+ <h3 class="text-xl font-semibold text-cyan-300">Enter Prompt (Alt+P)</h3>
88
+ <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>
89
+
90
+ <div class="flex items-center mt-2">
91
+ <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">
92
+ <label for="modal-refinement-checkbox" class="ml-2 block text-sm text-slate-200">Use prompt to refine active evolution</label>
93
+ </div>
94
+
95
+ <div class="mt-2">
96
+ <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>
97
+ <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">
98
+ </div>
99
+
100
+ <div class="mt-2">
101
+ <label for="model-select" class="block text-sm font-medium text-slate-300 mb-1">Select Model:</label>
102
+ <select id="model-select" name="model-select" class="futuristic-select block w-full sm:text-sm">
103
+ <option value="deepseek/deepseek-v3-turbo" selected>deepseek/deepseek-v3-turbo</option>
104
+ <option value="deepseek/deepseek-r1-turbo">deepseek/deepseek-r1-turbo</option>
105
+ <option value="qwen/qwen3-235b-a22b-fp8">qwen/qwen3-235b-a22b-fp8</option>
106
+ <option value="qwen/qwen3-30b-a3b-fp8">qwen/qwen3-30b-a3b-fp8</option>
107
+ <option value="qwen/qwen3-32b-fp8">qwen/qwen3-32b-fp8</option>
108
+ <option value="google/gemma-3-27b-it">google/gemma-3-27b-it</option>
109
+ <option value="mistralai/mistral-nemo">mistralai/mistral-nemo</option>
110
+ <option value="meta-llama/llama-4-maverick-17b-128e-instruct-fp8">meta-llama/llama-4-maverick-17b-128e-instruct-fp8</option>
111
+ <option value="meta-llama/llama-4-scout-17b-16e-instruct">meta-llama/llama-4-scout-17b-16e-instruct</option>
112
+ </select>
113
+ </div>
114
+
115
+ <div class="mt-3 flex justify-between items-center gap-4">
116
+ <div class="text-sm">
117
+ <span class="font-medium text-slate-300">Context:</span>
118
+ <span id="modal-context-size-value" class="text-cyan-400 font-semibold">N/A</span>
119
+ </div>
120
+ <div class="flex-grow">
121
+ <label for="modal-max-tokens-slider" class="block text-sm font-medium text-slate-300 mb-1">Max Output Tokens: <span id="modal-max-tokens-value" class="text-cyan-400 font-semibold">N/A</span></label>
122
+ <input type="range" id="modal-max-tokens-slider" name="modal-max-tokens-slider" min="256" max="4096" step="128" value="1024" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer">
123
+ </div>
124
+ </div>
125
+
126
+ <p class="text-xs text-slate-400 mt-3">Use Ctrl/Cmd+Enter to generate, Esc to close.</p>
127
+
128
+ <div class="flex justify-end gap-3 mt-2">
129
+ <button id="modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button>
130
+ <button id="modal-generate-button" class="futuristic-button px-4 py-2 text-sm">
131
+ Generate
132
+ <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>
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <div id="config-modal-overlay" class="modal-overlay">
139
+ <div id="config-modal-content" class="modal-content">
140
+ <h3 class="text-xl font-semibold text-cyan-300">Configuration (Alt+O)</h3>
141
+
142
+ <div class="space-y-4">
143
+ <div>
144
+ <label for="api-key" class="block text-sm font-medium text-slate-300 mb-1">Novita.AI API Key:</label>
145
+ <input type="password" id="api-key" name="api-key" class="futuristic-input block w-full sm:text-sm" placeholder="Enter your API Key">
146
+ </div>
147
+
148
+ <div class="pt-1">
149
+ <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>
150
+ <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">
151
+ <p class="mt-1 text-xs text-slate-400">Min time between preview updates (higher = less frequent).</p>
152
+ </div>
153
+
154
+ <div id="code-output-container">
155
+ <div id="code-output-header">
156
+ <h3 id="selected-code-title" class="text-lg font-medium text-cyan-300 flex-shrink-0">Selected Code:</h3>
157
+ <div class="flex items-center gap-2">
158
+ <button id="copy-code-button" title="Copy Code">
159
+ <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>
160
+ </button>
161
+ <button id="export-code-button" title="Export Code as ZIP">
162
+ <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>
163
+ </button>
164
+ </div>
165
+ </div>
166
+ <div class="flex-grow overflow-hidden min-h-0 flex">
167
+ <pre id="code-output" class="h-full"><code class="language-html">// Select a variation or history item to view its code.</code></pre>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="flex justify-end gap-3 mt-4">
173
+ <button id="config-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div id="confirm-modal-overlay" class="modal-overlay">
179
+ <div id="confirm-modal-content" class="modal-content max-w-md">
180
+ <h3 class="text-xl font-semibold text-cyan-300">Confirm Action</h3>
181
+ <p id="confirm-modal-message" class="text-sm text-slate-300">Are you sure?</p>
182
+ <div class="flex justify-end gap-3 mt-4">
183
+ <button id="confirm-modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button>
184
+ <button id="confirm-modal-confirm-button" class="futuristic-button px-4 py-2 text-sm bg-red-600 hover:bg-red-700">Confirm</button>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <div id="prompt-display-modal-overlay" class="modal-overlay">
190
+ <div id="prompt-display-modal-content" class="modal-content max-w-2xl">
191
+ <h3 class="text-xl font-semibold text-cyan-300 mb-2">Full Prompt</h3>
192
+ <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>
193
+ <div class="flex justify-end gap-3 mt-4">
194
+ <button id="prompt-display-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <script src="script.js"></script>
200
+ </body>
201
+ </html>