Spaces:
Running
Running
Commit
•
ee08f89
1
Parent(s):
ad11dc5
fixing bugs
Browse files- index.html +66 -14
index.html
CHANGED
|
@@ -38,26 +38,62 @@
|
|
| 38 |
<p>A space to generate tiny web apps.</p>
|
| 39 |
<p>In case of hallucination try generating again 🎲</p>
|
| 40 |
</div>
|
| 41 |
-
|
| 42 |
-
<div x-show="openModal" @click.away="openModal = false"
|
|
|
|
| 43 |
? 'w-full md:w-2/6'
|
| 44 |
: 'w-full md:w-6/6'">
|
| 45 |
<div x-show="openModal" class="bg-gray-400 p-6 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/3">
|
| 46 |
<h2 class="text-lg font-semibold mb-4">Choose Model</h2>
|
| 47 |
<div class="space-y-4">
|
| 48 |
-
<button
|
| 49 |
-
|
|
|
|
|
|
|
|
|
|
| 50 |
</div>
|
| 51 |
</div>
|
| 52 |
</div>
|
| 53 |
-
|
| 54 |
<form @submit.prevent="generateCode">
|
| 55 |
-
|
| 56 |
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
<div class="
|
| 60 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 61 |
|
| 62 |
|
| 63 |
|
|
@@ -255,7 +291,6 @@
|
|
| 255 |
const userPrompt = document.getElementById('prompt-input').value;
|
| 256 |
|
| 257 |
const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`;
|
| 258 |
-
console.log('Prompt:', htmlFormatPrompt);
|
| 259 |
try {
|
| 260 |
const response = await axios.post(`https://api-inference.huggingface.co/models/${this.selectedModel}`, {
|
| 261 |
inputs: htmlFormatPrompt,
|
|
@@ -264,10 +299,27 @@
|
|
| 264 |
'Authorization': 'Bearer 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',
|
| 265 |
},
|
| 266 |
});
|
| 267 |
-
|
| 268 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 269 |
|
| 270 |
-
if (extractedCode.toLowerCase().includes('<!doctype html>')) {
|
| 271 |
this.langName = 'html';
|
| 272 |
} else {
|
| 273 |
const programmingLanguages = ['html', 'javascript', 'python', 'php', 'c++'];
|
|
|
|
| 38 |
<p>A space to generate tiny web apps.</p>
|
| 39 |
<p>In case of hallucination try generating again 🎲</p>
|
| 40 |
</div>
|
| 41 |
+
|
| 42 |
+
<div x-show="openModal" @click.away="openModal = false"
|
| 43 |
+
class="fixed inset-0 z-50 overflow-auto bg-smoke-light flex items-center justify-center" :class="open
|
| 44 |
? 'w-full md:w-2/6'
|
| 45 |
: 'w-full md:w-6/6'">
|
| 46 |
<div x-show="openModal" class="bg-gray-400 p-6 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/3">
|
| 47 |
<h2 class="text-lg font-semibold mb-4">Choose Model</h2>
|
| 48 |
<div class="space-y-4">
|
| 49 |
+
<button
|
| 50 |
+
@click="selectModel('mistralai/Mistral-7B-Instruct-v0.1', 'https://mistral.ai/news/announcing-mistral-7b')"
|
| 51 |
+
class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Mistral-7B-Instruct-v0.1</button>
|
| 52 |
+
<button @click="selectModel('tiiuae/falcon-7b-instruct', 'https://www.tii.ae/news')"
|
| 53 |
+
class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">Falcon-7B-Instruct</button>
|
| 54 |
</div>
|
| 55 |
</div>
|
| 56 |
</div>
|
| 57 |
+
|
| 58 |
<form @submit.prevent="generateCode">
|
|
|
|
| 59 |
|
| 60 |
+
|
| 61 |
+
<div class="lg:col-span-2 p-2">
|
| 62 |
+
<div class="overflow-hidden rounded-xl border border-gray-400">
|
| 63 |
+
<div class="flex p-3">
|
| 64 |
+
<div>
|
| 65 |
+
<div class="flex p-1 text-sm text-gray-600 ">Current Model</div>
|
| 66 |
+
<div class="font-semibold text-black" id="ModelName">Mistral-7B-Instruct-v0.1
|
| 67 |
+
</div>
|
| 68 |
+
</div> <button type="button" @click="openModal = true"
|
| 69 |
+
class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"><svg
|
| 70 |
+
viewBox="0 0 16 16" width="1.2em" height="1.2em">
|
| 71 |
+
<path fill="currentColor"
|
| 72 |
+
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86a2.929 2.929 0 0 1 0 5.858z">
|
| 73 |
+
</path>
|
| 74 |
+
</svg></button>
|
| 75 |
+
</div>
|
| 76 |
+
<div
|
| 77 |
+
class="flex items-center gap-5 rounded-xl bg-gray-300 px-3 py-2 text-xs sm:text-sm text-gray-600 ">
|
| 78 |
+
<a id="PageModel" :href="PageModel" target="_blank" rel="noreferrer"
|
| 79 |
+
class="flex items-center hover:underline"><svg viewBox="0 0 32 32" width="1.2em"
|
| 80 |
+
height="1.2em" class="mr-1.5 shrink-0 text-xs text-gray-400">
|
| 81 |
+
<path fill="currentColor"
|
| 82 |
+
d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path>
|
| 83 |
+
</svg>
|
| 84 |
+
Model
|
| 85 |
+
<div class="max-sm:hidden"> page</div>
|
| 86 |
+
</a> <a :href="WebSiteModel" target="_blank"
|
| 87 |
+
class="ml-auto flex items-center hover:underline" rel="noreferrer"><svg
|
| 88 |
+
viewBox="0 0 32 32" width="1.2em" height="1.2em"
|
| 89 |
+
class="mr-1.5 shrink-0 text-xs text-gray-400">
|
| 90 |
+
<path fill="currentColor"
|
| 91 |
+
d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2Zm5 3.106a12.014 12.014 0 0 1 2.916 1.899L23.503 8H21Zm-7.622 22.597A11.976 11.976 0 0 1 8.116 6.976L9.465 9h3.342l-1.5 4H7.28l-1.382 4.148L8.465 21h5l1.432 2.147ZM16 28c-.203 0-.402-.02-.603-.03l1.397-4.19a1.988 1.988 0 0 0-.233-1.741l-1.432-2.148A1.996 1.996 0 0 0 13.465 19h-3.93l-1.432-2.148L8.721 15H11v2h2v-2.819l2.936-7.83l-1.872-.702L13.557 7h-3.022l-.807-1.21A11.794 11.794 0 0 1 19 4.394V8a2.002 2.002 0 0 0 2 2h2.586A1.986 1.986 0 0 0 25 9.414l.14-.14l.282-.68A11.981 11.981 0 0 1 27.3 12h-4.701a1.993 1.993 0 0 0-1.972 1.665l-.597 3.441a1.99 1.99 0 0 0 .991 2.086l2.165 1.464l1.458 3.646A11.958 11.958 0 0 1 16 28Zm8.815-8.656L22.1 17.509l-.1-.06l.599-3.449h5.22a11.743 11.743 0 0 1-1.744 8.495Z">
|
| 92 |
+
</path>
|
| 93 |
+
</svg>
|
| 94 |
+
Website</a></div>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
|
| 98 |
|
| 99 |
|
|
|
|
| 291 |
const userPrompt = document.getElementById('prompt-input').value;
|
| 292 |
|
| 293 |
const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`;
|
|
|
|
| 294 |
try {
|
| 295 |
const response = await axios.post(`https://api-inference.huggingface.co/models/${this.selectedModel}`, {
|
| 296 |
inputs: htmlFormatPrompt,
|
|
|
|
| 299 |
'Authorization': 'Bearer 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',
|
| 300 |
},
|
| 301 |
});
|
| 302 |
+
let extractedCode = '';
|
| 303 |
+
|
| 304 |
+
try {
|
| 305 |
+
const generatedTextParts = response.data[0].generated_text.split('```');
|
| 306 |
+
extractedCode = generatedTextParts[1].trim();
|
| 307 |
+
} catch (error) {
|
| 308 |
+
const generatedTextParts = response.data[0].generated_text.split('<div>');
|
| 309 |
+
|
| 310 |
+
if (generatedTextParts.length > 1) {
|
| 311 |
+
extractedCode = generatedTextParts[1].split('</')[0].trim();
|
| 312 |
+
} else {
|
| 313 |
+
const codeSections = response.data[0].generated_text.split('```');
|
| 314 |
+
|
| 315 |
+
if (codeSections.length > 1) {
|
| 316 |
+
extractedCode = codeSections[1].trim();
|
| 317 |
+
}
|
| 318 |
+
}
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
|
| 322 |
+
if (extractedCode.toLowerCase().includes('<!doctype html>') || extractedCode.toLowerCase().includes('<div>')) {
|
| 323 |
this.langName = 'html';
|
| 324 |
} else {
|
| 325 |
const programmingLanguages = ['html', 'javascript', 'python', 'php', 'c++'];
|