Hugging Face's logo

Spaces:
viktor-hu
/
novita-anysite
Running

App Files Community
10
viktor-hu commited on
Commit
0f99a88
·
1 Parent(s): 7cd1489

feat. update default template

Browse files
Files changed (2) hide show
  1. src/lib/constants.dev.ts +139 -42
  2. src/lib/constants.prod.ts +139 -41
src/lib/constants.dev.ts CHANGED
@@ -58,49 +58,146 @@ export const MODEL_CONFIG_CODE_GENERATION = [
58
  export const DEFAULT_HTML = `<!DOCTYPE html>
59
  <html lang="en">
60
  <head>
61
- <meta charset="UTF-8">
62
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
63
- <title>Novita AnySite</title>
64
- <script src="https://cdn.tailwindcss.com"></script>
65
- <style>
66
- body {
67
- font-family: 'Arial', sans-serif;
68
- background-color: #f5f5f5;
69
- }
70
- .container {
71
- max-width: 800px;
72
- margin: 0 auto;
73
- padding: 40px 20px;
74
- text-align: center;
75
- }
76
- .title {
77
- font-size: 32px;
78
- font-weight: bold;
79
- margin-bottom: 20px;
80
- color: #333;
81
- }
82
- .subtitle {
83
- font-size: 18px;
84
- color: #666;
85
- margin-bottom: 30px;
86
- line-height: 1.5;
87
- }
88
- .highlight {
89
- color: #23d57c;
90
- }
91
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </head>
93
- <body>
94
- <div class="container">
95
- <h1 class="title">Welcome to <span class="highlight">Novita AnySite</span></h1>
96
- <p class="subtitle">
97
- This is a simple demonstration page. Use the prompt input below to describe
98
- the website you want to build, and our AI will generate it for you!
99
- </p>
100
- <div class="mt-8 text-left bg-gray-100 p-4 rounded-lg">
101
- <p class="text-sm text-gray-600 mb-2">Example prompt:</p>
102
- <p class="text-gray-800">"Build a snake game."</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </div>
104
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </body>
106
  </html>`;
 
58
  export const DEFAULT_HTML = `<!DOCTYPE html>
59
  <html lang="en">
60
  <head>
61
+ <meta charset="UTF-8">
62
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
63
+ <title>Novita ANYSITE - Build Any Site, Just Vibe Coding</title>
64
+ <script src="https://cdn.tailwindcss.com"></script>
65
+ <link rel="preconnect" href="https://fonts.googleapis.com">
66
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
67
+ <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Oswald:wght@700&display=swap" rel="stylesheet">
68
+ <style>
69
+ body {
70
+ background-color: #000;
71
+ color: #fff;
72
+ margin: 0;
73
+ padding: 0;
74
+ overflow-x: hidden;
75
+ font-family: 'Kanit', sans-serif;
76
+ }
77
+ .brutal-border {
78
+ border: 8px solid #fff;
79
+ }
80
+ .brutal-box {
81
+ box-shadow: 16px 16px 0 #fff;
82
+ }
83
+ .pixel-grid {
84
+ background-image:
85
+ linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
86
+ linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
87
+ background-size: 25px 25px;
88
+ }
89
+ .scanlines {
90
+ background-image: linear-gradient(
91
+ rgba(255, 255, 255, 0.05) 50%,
92
+ transparent 50%
93
+ );
94
+ background-size: 100% 4px;
95
+ }
96
+ .font-oswald {
97
+ font-family: 'Oswald', sans-serif;
98
+ font-weight: 700;
99
+ }
100
+ .font-mono-custom {
101
+ font-family: 'Courier New', Courier, monospace;
102
+ }
103
+ /* Custom class for extremely large, responsive font */
104
+ .text-huge {
105
+ font-size: clamp(6rem, 20vw, 15rem);
106
+ }
107
+ </style>
108
  </head>
109
+ <body class="pixel-grid scanlines">
110
+ <div class="min-h-screen flex items-center justify-center p-4">
111
+
112
+ <div class="relative flex flex-col items-center">
113
+ <!-- Title placed above and overlapping the window -->
114
+ <h1 class="font-oswald text-huge leading-none tracking-tighter text-center select-none z-10">
115
+ ANYSITE
116
+ </h1>
117
+
118
+ <!-- Main brutalist window, pulled up with a negative margin to sit behind the title -->
119
+ <div id="main-window" class="relative -mt-8 md:-mt-4 brutal-border p-6 md:p-8 bg-black brutal-box w-full max-w-4xl transition-all duration-200">
120
+
121
+ <div class="flex justify-end items-center mb-6 h-8">
122
+ <div class="text-xs md:text-sm text-right">Build Any Site.<br>Just Vibe Coding.</div>
123
+ </div>
124
+
125
+ <!-- Brutalist terminal effect -->
126
+ <div class="bg-black p-4 border-2 border-white/20">
127
+ <div class="flex mb-3">
128
+ <div class="w-3 h-3 bg-red-500 mr-2 border border-white/50"></div>
129
+ <div class="w-3 h-3 bg-yellow-500 mr-2 border border-white/50"></div>
130
+ <div class="w-3 h-3 bg-green-500 border border-white/50"></div>
131
+ </div>
132
+ <div class="font-mono-custom text-green-400 text-base md:text-lg">
133
+ <p class="mb-2">> whoami</p>
134
+ <p class="mb-2">Novita Anysite helps you build websites by simply describing what you want to create, powered by state-of-the-art open-source LLMs, complete with version control and auto-deploy with shareable links.</p>
135
+ <div>
136
+ <span class="mr-2">></span>
137
+ <span id="typed-text" class="bg-green-400 text-black"></span>
138
+ <span class="animate-pulse">█</span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ </div>
144
+ </div>
145
  </div>
146
+
147
+ <script>
148
+ document.addEventListener('DOMContentLoaded', function() {
149
+ // Brutalist press-down interactivity
150
+ const mainWindow = document.getElementById('main-window');
151
+ const originalBoxShadow = '16px 16px 0 #fff';
152
+
153
+ if (mainWindow) {
154
+ mainWindow.addEventListener('mousedown', function() {
155
+ this.style.transform = 'translate(8px, 8px)';
156
+ this.style.boxShadow = '8px 8px 0 #fff';
157
+ });
158
+
159
+ const resetStyle = () => {
160
+ mainWindow.style.transform = '';
161
+ mainWindow.style.boxShadow = originalBoxShadow;
162
+ };
163
+
164
+ mainWindow.addEventListener('mouseup', resetStyle);
165
+ mainWindow.addEventListener('mouseleave', resetStyle);
166
+ }
167
+
168
+ // Terminal typing effect
169
+ const typedTextSpan = document.getElementById("typed-text");
170
+ const textArray = ["Build a retro arcade game collection.", "Create a cyberpunk portfolio site.", "Design a minimalist blog platform.", "Build a space exploration dashboard.", "Design a brutalist art gallery."];
171
+ const typingDelay = 50;
172
+ const erasingDelay = 5;
173
+ const newTextDelay = 1500; // Delay between current and next text
174
+ let textArrayIndex = 0;
175
+ let charIndex = 0;
176
+
177
+ function type() {
178
+ if (charIndex < textArray[textArrayIndex].length) {
179
+ typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
180
+ charIndex++;
181
+ setTimeout(type, typingDelay);
182
+ } else {
183
+ setTimeout(erase, newTextDelay);
184
+ }
185
+ }
186
+
187
+ function erase() {
188
+ if (charIndex > 0) {
189
+ typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
190
+ charIndex--;
191
+ setTimeout(erase, erasingDelay);
192
+ } else {
193
+ textArrayIndex++;
194
+ if (textArrayIndex >= textArray.length) textArrayIndex = 0;
195
+ setTimeout(type, typingDelay + 1100);
196
+ }
197
+ }
198
+
199
+ setTimeout(type, newTextDelay);
200
+ });
201
+ </script>
202
  </body>
203
  </html>`;
src/lib/constants.prod.ts CHANGED
@@ -58,48 +58,146 @@ export const MODEL_CONFIG_CODE_GENERATION = [
58
  export const DEFAULT_HTML = `<!DOCTYPE html>
59
  <html lang="en">
60
  <head>
61
- <meta charset="UTF-8">
62
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
63
- <title>Novita AnySite</title>
64
- <script src="https://cdn.tailwindcss.com"></script>
65
- <style>
66
- body {
67
- font-family: 'Arial', sans-serif;
68
- background-color: #f5f5f5;
69
- }
70
- .container {
71
- max-width: 800px;
72
- margin: 0 auto;
73
- padding: 40px 20px;
74
- text-align: center;
75
- }
76
- .title {
77
- font-size: 32px;
78
- font-weight: bold;
79
- margin-bottom: 20px;
80
- color: #333;
81
- }
82
- .subtitle {
83
- font-size: 18px;
84
- color: #666;
85
- margin-bottom: 30px;
86
- line-height: 1.5;
87
- }
88
- .highlight {
89
- color: #23d57c;
90
- }
91
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </head>
93
- <body>
94
- <div class="container">
95
- <h1 class="title">Welcome to <span class="highlight">Novita AnySite</span></h1>
96
- <p class="subtitle">
97
- This is a demo that shows how to use Novita LLM to build a website for you. Simply use the prompt input below to describe the website you want to create, and Novita Anysite will generate it for you!
98
- </p>
99
- <div class="mt-8 text-left bg-gray-100 p-4 rounded-lg">
100
- <p class="text-sm text-gray-600 mb-2">Example prompt:</p>
101
- <p class="text-gray-800">"Build a snake game"</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </div>
103
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  </body>
105
  </html>`;
 
58
  export const DEFAULT_HTML = `<!DOCTYPE html>
59
  <html lang="en">
60
  <head>
61
+ <meta charset="UTF-8">
62
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
63
+ <title>Novita ANYSITE - Build Any Site, Just Vibe Coding</title>
64
+ <script src="https://cdn.tailwindcss.com"></script>
65
+ <link rel="preconnect" href="https://fonts.googleapis.com">
66
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
67
+ <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Oswald:wght@700&display=swap" rel="stylesheet">
68
+ <style>
69
+ body {
70
+ background-color: #000;
71
+ color: #fff;
72
+ margin: 0;
73
+ padding: 0;
74
+ overflow-x: hidden;
75
+ font-family: 'Kanit', sans-serif;
76
+ }
77
+ .brutal-border {
78
+ border: 8px solid #fff;
79
+ }
80
+ .brutal-box {
81
+ box-shadow: 16px 16px 0 #fff;
82
+ }
83
+ .pixel-grid {
84
+ background-image:
85
+ linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
86
+ linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
87
+ background-size: 25px 25px;
88
+ }
89
+ .scanlines {
90
+ background-image: linear-gradient(
91
+ rgba(255, 255, 255, 0.05) 50%,
92
+ transparent 50%
93
+ );
94
+ background-size: 100% 4px;
95
+ }
96
+ .font-oswald {
97
+ font-family: 'Oswald', sans-serif;
98
+ font-weight: 700;
99
+ }
100
+ .font-mono-custom {
101
+ font-family: 'Courier New', Courier, monospace;
102
+ }
103
+ /* Custom class for extremely large, responsive font */
104
+ .text-huge {
105
+ font-size: clamp(6rem, 20vw, 15rem);
106
+ }
107
+ </style>
108
  </head>
109
+ <body class="pixel-grid scanlines">
110
+ <div class="min-h-screen flex items-center justify-center p-4">
111
+
112
+ <div class="relative flex flex-col items-center">
113
+ <!-- Title placed above and overlapping the window -->
114
+ <h1 class="font-oswald text-huge leading-none tracking-tighter text-center select-none z-10">
115
+ ANYSITE
116
+ </h1>
117
+
118
+ <!-- Main brutalist window, pulled up with a negative margin to sit behind the title -->
119
+ <div id="main-window" class="relative -mt-8 md:-mt-4 brutal-border p-6 md:p-8 bg-black brutal-box w-full max-w-4xl transition-all duration-200">
120
+
121
+ <div class="flex justify-end items-center mb-6 h-8">
122
+ <div class="text-xs md:text-sm text-right">Build Any Site.<br>Just Vibe Coding.</div>
123
+ </div>
124
+
125
+ <!-- Brutalist terminal effect -->
126
+ <div class="bg-black p-4 border-2 border-white/20">
127
+ <div class="flex mb-3">
128
+ <div class="w-3 h-3 bg-red-500 mr-2 border border-white/50"></div>
129
+ <div class="w-3 h-3 bg-yellow-500 mr-2 border border-white/50"></div>
130
+ <div class="w-3 h-3 bg-green-500 border border-white/50"></div>
131
+ </div>
132
+ <div class="font-mono-custom text-green-400 text-base md:text-lg">
133
+ <p class="mb-2">> whoami</p>
134
+ <p class="mb-2">Novita Anysite helps you build websites by simply describing what you want to create, powered by state-of-the-art open-source LLMs, complete with version control and auto-deploy with shareable links.</p>
135
+ <div>
136
+ <span class="mr-2">></span>
137
+ <span id="typed-text" class="bg-green-400 text-black"></span>
138
+ <span class="animate-pulse">█</span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ </div>
144
+ </div>
145
  </div>
146
+
147
+ <script>
148
+ document.addEventListener('DOMContentLoaded', function() {
149
+ // Brutalist press-down interactivity
150
+ const mainWindow = document.getElementById('main-window');
151
+ const originalBoxShadow = '16px 16px 0 #fff';
152
+
153
+ if (mainWindow) {
154
+ mainWindow.addEventListener('mousedown', function() {
155
+ this.style.transform = 'translate(8px, 8px)';
156
+ this.style.boxShadow = '8px 8px 0 #fff';
157
+ });
158
+
159
+ const resetStyle = () => {
160
+ mainWindow.style.transform = '';
161
+ mainWindow.style.boxShadow = originalBoxShadow;
162
+ };
163
+
164
+ mainWindow.addEventListener('mouseup', resetStyle);
165
+ mainWindow.addEventListener('mouseleave', resetStyle);
166
+ }
167
+
168
+ // Terminal typing effect
169
+ const typedTextSpan = document.getElementById("typed-text");
170
+ const textArray = ["Build a retro arcade game collection.", "Create a cyberpunk portfolio site.", "Design a minimalist blog platform.", "Build a space exploration dashboard.", "Design a brutalist art gallery."];
171
+ const typingDelay = 50;
172
+ const erasingDelay = 5;
173
+ const newTextDelay = 1500; // Delay between current and next text
174
+ let textArrayIndex = 0;
175
+ let charIndex = 0;
176
+
177
+ function type() {
178
+ if (charIndex < textArray[textArrayIndex].length) {
179
+ typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
180
+ charIndex++;
181
+ setTimeout(type, typingDelay);
182
+ } else {
183
+ setTimeout(erase, newTextDelay);
184
+ }
185
+ }
186
+
187
+ function erase() {
188
+ if (charIndex > 0) {
189
+ typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
190
+ charIndex--;
191
+ setTimeout(erase, erasingDelay);
192
+ } else {
193
+ textArrayIndex++;
194
+ if (textArrayIndex >= textArray.length) textArrayIndex = 0;
195
+ setTimeout(type, typingDelay + 1100);
196
+ }
197
+ }
198
+
199
+ setTimeout(type, newTextDelay);
200
+ });
201
+ </script>
202
  </body>
203
  </html>`;