Spaces:
Running
Running
Upload 5 files
Browse files- README.md +3 -3
- index.html +301 -64
- script.js +31 -0
README.md
CHANGED
@@ -1,8 +1,8 @@
|
|
1 |
---
|
2 |
title: Text2code
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
---
|
|
|
1 |
---
|
2 |
title: Text2code
|
3 |
+
emoji: ⚡
|
4 |
+
colorFrom: yellow
|
5 |
+
colorTo: pink
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
---
|
index.html
CHANGED
@@ -1,71 +1,308 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
<
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
15 |
? 'text-2xl md:text-3xl lg:text-4xl'
|
16 |
: 'text-2xl md:text-3xl lg:text-6xl'">
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
20 |
? 'text-lg lg:text-xl'
|
21 |
: 'text-lg lg:text-xl'">
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
71 |
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<meta charset="utf-8" />
|
6 |
+
<meta name="viewport" content="width=device-width" />
|
7 |
+
<title>My static Space</title>
|
8 |
+
<link rel="stylesheet" href="style.css" />
|
9 |
+
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
|
10 |
+
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
11 |
+
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
12 |
+
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
|
13 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
|
14 |
+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
15 |
+
</head>
|
16 |
+
|
17 |
+
<body class="bg-stone-100 dark:bg-gray-800 dark:text-white" x-data="app()">
|
18 |
+
<div class="flex flex-col md:flex-row" x-data="app()" x-init="init()">
|
19 |
+
|
20 |
+
<div class="hero rounded-3xl md:h-screen bg-stone-200 transition-[width] delay-150 ease-in-out w-full md:w-6/6"
|
21 |
+
:class="open ? 'w-full md:w-2/6' : 'w-full md:w-6/6'">
|
22 |
+
<!-- <div class="flex justify-between items-center mb-2" style="padding: 10px;margin-left: auto;margin-bottom: auto;">
|
23 |
+
|
24 |
+
<button id="toggleDarkMode" class="mt-4 bg-gray-700 text-white px-4 py-2 rounded-md">Toggle Dark Mode</button>
|
25 |
+
|
26 |
+
</div> -->
|
27 |
+
<div class="hero-content text-center">
|
28 |
+
<div class="flex flex-col w-full md:max-w-xl space-y-3 md:space-y-6">
|
29 |
+
<h1 class="font-bold text-stone-600 mb-1 md:mb-3 transition-all delay-150 ease-in-out text-2xl md:text-3xl lg:text-6xl"
|
30 |
+
:class="open
|
31 |
? 'text-2xl md:text-3xl lg:text-4xl'
|
32 |
: 'text-2xl md:text-3xl lg:text-6xl'">
|
33 |
+
Text To Code
|
34 |
+
</h1>
|
35 |
+
<div class="py-1 md:py-2 space-y-2 md:space-y-3 text-stone-600 transition-all delay-150 ease-in-out text-lg lg:text-xl"
|
36 |
+
:class="open
|
37 |
? 'text-lg lg:text-xl'
|
38 |
: 'text-lg lg:text-xl'">
|
39 |
+
<p>A space to generate tiny web apps.</p>
|
40 |
+
<p>In case of hallucination try generating again 🎲</p>
|
41 |
+
</div>
|
42 |
+
<form @submit.prevent="generateCode">
|
43 |
+
<div class="mb-4 w-full max-w-3xl rounded-lg bg-slate-200">
|
44 |
+
<div class="rounded-lg rounded-b-none border border-slate-300 bg-slate-50 px-2 py-2">
|
45 |
+
<label for="prompt-input" class="sr-only">Describe your web app</label>
|
46 |
+
<textarea id="prompt-input" rows="4"
|
47 |
+
class="w-full border-0 bg-slate-50 px-0 text-base text-slate-900 focus:outline-none "
|
48 |
+
placeholder="Describe your web app" required></textarea>
|
49 |
+
</div>
|
50 |
+
<div class="ml-2 flex items-center py-2">
|
51 |
+
<div>
|
52 |
+
<button type="submit"
|
53 |
+
x-bind:class="{ 'bg-blue-600': !loading, 'bg-gray-400 cursor-not-allowed': loading }"
|
54 |
+
x-bind:disabled="loading"
|
55 |
+
class="inline-flex items-center gap-x-2 rounded-lg px-4 py-2.5 text-center text-base font-medium text-slate-50 hover:bg-blue-800 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900">
|
56 |
+
<span x-show="!loading">Generate</span>
|
57 |
+
<span x-show="loading">Generating...</span>
|
58 |
+
<svg x-show="!loading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
|
59 |
+
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
60 |
+
stroke-linecap="round" stroke-linejoin="round">
|
61 |
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
62 |
+
<path d="M10 14l11 -11"></path>
|
63 |
+
<path
|
64 |
+
d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5">
|
65 |
+
</path>
|
66 |
+
</svg>
|
67 |
+
</button>
|
68 |
+
<button type="reset"
|
69 |
+
class="ml-2 inline-flex items-center gap-x-2 rounded-lg bg-slate-700 px-4 py-2.5 text-center text-base font-medium text-slate-50 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900">
|
70 |
+
Cancel
|
71 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24"
|
72 |
+
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
|
73 |
+
stroke-linejoin="round">
|
74 |
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
75 |
+
<path d="M18 6l-12 12"></path>
|
76 |
+
<path d="M6 6l12 12"></path>
|
77 |
+
</svg>
|
78 |
+
</button>
|
79 |
+
</div>
|
80 |
+
</div>
|
81 |
+
</div>
|
82 |
+
<div class="mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 sm:grid-cols-3 sm:gap-2 sm:text-sm md:grid-cols-4 md:text-base">
|
83 |
+
<button type="button"
|
84 |
+
@click="updateContent('Write Code in html and css for a simple web page')"
|
85 |
+
class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">
|
86 |
+
Code HTML
|
87 |
+
</button>
|
88 |
+
<button type="button" @click="updateContent('Write Code in python to print Hello World')"
|
89 |
+
class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">
|
90 |
+
Code Python
|
91 |
+
</button>
|
92 |
+
<button type="button"
|
93 |
+
@click="updateContent('Write Code in javascript to print Hello World')"
|
94 |
+
class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">
|
95 |
+
Code Js
|
96 |
+
</button>
|
97 |
+
<button type="button" @click="updateContent('Write Code in HTML+CSS code and login page Using components from Bootstrap CSS framework')"
|
98 |
+
class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">
|
99 |
+
Code Login
|
100 |
+
</button>
|
101 |
+
</div>
|
102 |
+
</form>
|
103 |
+
|
104 |
+
</div>
|
105 |
+
|
106 |
+
</div>
|
107 |
+
|
108 |
+
</div>
|
109 |
+
<div class="hero rounded-3xl md:h-screen bg-stone-200 transition-[width] delay-150 ease-in-out w-full ml-2.5 md:w-6/6 md:w-4/6" :class="{ 'md:w-4/6': open, 'md:w-0': !open }" >
|
110 |
+
<div class="flex flex-col transition-[width] delay-150 ease-in-out md:h-screen w-full"
|
111 |
+
:class="{ 'md:w-4/6': open, 'md:w-0': !open }">
|
112 |
+
|
113 |
+
<fram id="iframe" class="border-none w-full md:min-h-screen" src="">
|
114 |
+
<div x-show="open" class="relative max-w-2xl mx-auto mt-11">
|
115 |
+
<div class="flex space-x-1 rounded-lg" role="tablist" aria-orientation="horizontal">
|
116 |
+
<button @click="activeTab = 'code'"
|
117 |
+
:class="{ 'bg-white shadow': activeTab === 'code', 'bg-transparent': activeTab !== 'code' }"
|
118 |
+
class="flex items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 text-slate-600"
|
119 |
+
id="headlessui-tabs-tab-14" role="tab" type="button" aria-selected="false" tabindex="-1"
|
120 |
+
data-headlessui-state="" aria-controls="headlessui-tabs-panel-16">
|
121 |
+
<svg class="h-5 w-5 flex-none "
|
122 |
+
:class="{ 'stroke-slate-600': activeTab !== 'code', 'stroke-sky-500': activeTab == 'code' }"
|
123 |
+
fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
124 |
+
xmlns="http://www.w3.org/2000/svg">
|
125 |
+
<path d="m13.75 6.75 3.5 3.25-3.5 3.25M6.25 13.25 2.75 10l3.5-3.25"></path>
|
126 |
+
</svg><span class="sr-only lg:not-sr-only lg:ml-2"
|
127 |
+
:class="{ 'text-slate-400': activeTab !== 'code', 'text-slate-600': activeTab == 'code' }">Code</span>
|
128 |
+
</button>
|
129 |
+
<button @click="activeTab = 'preview'"
|
130 |
+
:class="{ 'bg-white shadow': activeTab === 'preview', 'bg-transparent': activeTab !== 'preview' }"
|
131 |
+
class="flex items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 text-white"
|
132 |
+
id="headlessui-tabs-tab-13" role="tab" type="button" aria-selected="true" tabindex="0"
|
133 |
+
data-headlessui-state="selected" aria-controls="headlessui-tabs-panel-15">
|
134 |
+
<svg class="h-5 w-5 flex-none"
|
135 |
+
:class="{ 'stroke-slate-600': activeTab !== 'preview', 'stroke-sky-500': activeTab == 'preview' }"
|
136 |
+
fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
137 |
+
xmlns="http://www.w3.org/2000/svg">
|
138 |
+
<path
|
139 |
+
d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10Z">
|
140 |
+
</path>
|
141 |
+
<circle cx="10" cy="10" r="2.25"></circle>
|
142 |
+
</svg><span class="sr-only lg:not-sr-only lg:ml-2"
|
143 |
+
:class="{ 'text-slate-400': activeTab !== 'preview', 'text-slate-600': activeTab == 'preview' }">Preview</span>
|
144 |
+
</button>
|
145 |
+
</div>
|
146 |
+
<div id="previewContainer" class="bg-gray-900 text-white p-4 rounded-md" x-show="activeTab === 'code'" style="display: none; overflow-y: auto; max-height: 80vh;">
|
147 |
+
|
148 |
+
<div class="flex justify-between items-center mb-2">
|
149 |
+
<span class="text-gray-400" id="langName">Code:</span>
|
150 |
+
<button @click="copyGeneratedCode" data-clipboard-target="#code"
|
151 |
+
class="code inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg bg-slate-200 p-3 text-slate-800 transition-colors hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
|
152 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24"
|
153 |
+
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
|
154 |
+
stroke-linejoin="round">
|
155 |
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
156 |
+
<path
|
157 |
+
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2">
|
158 |
+
</path>
|
159 |
+
<path
|
160 |
+
d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z">
|
161 |
+
</path>
|
162 |
+
</svg>
|
163 |
+
<span class="text-sm font-medium">Copy</span>
|
164 |
+
<span class="sr-only">Copy</span>
|
165 |
+
</button>
|
166 |
+
</div>
|
167 |
+
|
168 |
+
<div class="overflow-x-auto">
|
169 |
+
<pre id="generated-code" class="text-gray-300">
|
170 |
+
<code></code>
|
171 |
+
</pre>
|
172 |
+
</div>
|
173 |
+
</div>
|
174 |
+
<div class="bg-gray-900 text-white p-4 rounded-md"
|
175 |
+
x-show="activeTab === 'preview' && langName === 'html'">
|
176 |
+
<div class="flex justify-between items-center mb-2">
|
177 |
+
<span class="text-gray-400" id="langName">Preview:</span>
|
178 |
+
<button class="code bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1 rounded-md" @click="tryIt">
|
179 |
+
<!-- i want this button show result in another window -->
|
180 |
+
Try it
|
181 |
+
</button>
|
182 |
+
</div>
|
183 |
+
<div class="overflow-x-auto">
|
184 |
+
<div id="PreviewCode"></div>
|
185 |
+
</div>
|
186 |
+
</div>
|
187 |
+
</div>
|
188 |
+
</fram>
|
189 |
+
<div x-show="loading" class="flex w-full -mt-20 items-end justify-center pointer-events-none"
|
190 |
+
:style="{ 'display': open ? 'block' : 'none' }">
|
191 |
+
<div class="flex flex-row py-3 px-8 text-center bg-stone-200 text-stone-600 rounded-md shadow-md">
|
192 |
+
<div class="animate-bounce duration-150 mr-1">🤖</div>
|
193 |
+
<div>Generating your app..</div>
|
194 |
+
</div>
|
195 |
+
</div>
|
196 |
+
</div>
|
197 |
+
</div></div>
|
198 |
+
<script>
|
199 |
+
function app() {
|
200 |
+
return {
|
201 |
+
open: false,
|
202 |
+
loading: false,
|
203 |
+
selectedPrompt: null,
|
204 |
+
activeTab: 'code',
|
205 |
+
langName: 'Code:',
|
206 |
+
isFirstToggle: true, // Added a flag to track the first toggle
|
207 |
+
init() {
|
208 |
+
|
209 |
+
},
|
210 |
+
async generateCode() {
|
211 |
+
if (this.isFirstToggle) {
|
212 |
+
this.open = true;
|
213 |
+
this.isFirstToggle = false;
|
214 |
+
}
|
215 |
+
this.loading = !this.loading;
|
216 |
+
// Get the prompt value from the input
|
217 |
+
const userPrompt = document.getElementById('prompt-input').value;
|
218 |
+
|
219 |
+
// Ensure the generated code is in HTML format
|
220 |
+
const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`;
|
221 |
+
console.log('Prompt:', htmlFormatPrompt);
|
222 |
+
try {
|
223 |
+
const response = await axios.post('https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1', {
|
224 |
+
inputs: htmlFormatPrompt,
|
225 |
+
}, {
|
226 |
+
headers: {
|
227 |
+
'Authorization': 'Bearer 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',
|
228 |
+
},
|
229 |
+
});
|
230 |
+
// console.log('Response:', response.data[0].generated_text);
|
231 |
+
const generatedTextParts = response.data[0].generated_text.split('```');
|
232 |
+
const extractedCode = generatedTextParts[1].trim(); // Trim to remove leading/trailing spaces
|
233 |
+
|
234 |
+
// List of programming languages to search for
|
235 |
+
if (extractedCode.toLowerCase().includes('<!doctype html>')) {
|
236 |
+
this.langName = 'html';
|
237 |
+
} else {
|
238 |
+
// If not found, search for programming languages
|
239 |
+
const programmingLanguages = ['html', 'javascript', 'python', 'php', 'c++'];
|
240 |
+
programmingLanguages.forEach(lang => {
|
241 |
+
if (extractedCode.toLowerCase().includes(lang)) {
|
242 |
+
this.langName = lang;
|
243 |
+
}
|
244 |
+
});
|
245 |
+
}
|
246 |
+
|
247 |
+
const modifiedCode = extractedCode.replace(new RegExp(this.langName, 'i'), '').trim();
|
248 |
+
document.getElementById('generated-code').textContent = modifiedCode;
|
249 |
+
document.getElementById('langName').textContent = `${this.langName}`;
|
250 |
+
document.getElementById('PreviewCode').innerHTML = modifiedCode;
|
251 |
+
|
252 |
+
} catch (error) {
|
253 |
+
console.error('Error generating code:', error);
|
254 |
+
} finally {
|
255 |
+
this.loading = !this.loading;
|
256 |
+
}
|
257 |
+
},
|
258 |
+
updateContent(prompt) {
|
259 |
+
document.getElementById('prompt-input').value = prompt;
|
260 |
+
},
|
261 |
+
copyGeneratedCode() {
|
262 |
+
const clipboard = new ClipboardJS('.code', {
|
263 |
+
target: function (trigger) {
|
264 |
+
return document.getElementById('generated-code');
|
265 |
+
}
|
266 |
+
});
|
267 |
+
|
268 |
+
clipboard.on('success', function (e) {
|
269 |
+
console.log('Code copied to clipboard:', e.text);
|
270 |
+
clipboard.destroy();
|
271 |
+
|
272 |
+
});
|
273 |
+
|
274 |
+
clipboard.on('error', function (e) {
|
275 |
+
console.error('Error copying code:', e.action);
|
276 |
+
|
277 |
+
});
|
278 |
+
},
|
279 |
+
updatePreviewContent(htmlContent) {
|
280 |
+
// Get the preview container
|
281 |
+
const previewContainer = document.getElementById('previewContainer');
|
282 |
+
|
283 |
+
// Set the HTML content
|
284 |
+
previewContainer.innerHTML = htmlContent;
|
285 |
+
},
|
286 |
+
tryIt() {
|
287 |
+
const modifiedCode = document.getElementById('PreviewCode').innerHTML;
|
288 |
+
|
289 |
+
const previewWindow = window.open('', '_blank');
|
290 |
+
previewWindow.document.write(`${modifiedCode}`) ;
|
291 |
+
}
|
292 |
+
};
|
293 |
+
}
|
294 |
+
</script>
|
295 |
+
</body>
|
296 |
+
|
297 |
</html>
|
298 |
+
|
299 |
+
|
300 |
+
|
301 |
+
|
302 |
+
|
303 |
+
|
304 |
+
|
305 |
+
<!--
|
306 |
+
https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1
|
307 |
+
https://api-inference.huggingface.co/models/tiiuae/falcon-7b-instruct
|
308 |
+
-->
|
script.js
ADDED
@@ -0,0 +1,31 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
function app() {
|
2 |
+
return {
|
3 |
+
open: false,
|
4 |
+
loading: false,
|
5 |
+
selectedPrompt: null,
|
6 |
+
init() {
|
7 |
+
|
8 |
+
},
|
9 |
+
async generateCode() {
|
10 |
+
this.open = !this.open;
|
11 |
+
this.loading = !this.loading;
|
12 |
+
const prompt = document.getElementById('prompt-input').value;
|
13 |
+
console.log('Prompt:', prompt);
|
14 |
+
// try {
|
15 |
+
// const prompt = document.getElementById('prompt-input').value;
|
16 |
+
// } catch (error) {
|
17 |
+
// console.error('Error generating code:', error);
|
18 |
+
// } finally {
|
19 |
+
// // Update the loading state
|
20 |
+
// this.loading = !this.loading;
|
21 |
+
// }
|
22 |
+
},
|
23 |
+
updateContent(prompt) {
|
24 |
+
document.getElementById('prompt-input').value = prompt;
|
25 |
+
},
|
26 |
+
copyGeneratedCode() {
|
27 |
+
const generatedCodeElement = document.getElementById('generated-code');
|
28 |
+
const codeToCopy = generatedCodeElement.textContent;
|
29 |
+
},
|
30 |
+
};
|
31 |
+
}
|