PeepDaSlan9/text_to_code
1
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 href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />9 <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>10 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">11 <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>13 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>14</head>15 16<body class="bg-stone-100 dark:bg-gray-800 dark:text-white" x-data="app()">17 <div class="flex flex-col md:flex-row" x-data="app()" x-init="init()">18 19 <div class="hero rounded-3xl md:h-screen bg-stone-200 transition-[width] delay-150 ease-in-out w-full md:w-6/6"20 :class="open ? 'w-full md:w-2/6' : 'w-full md:w-6/6'">21 <!-- <div class="flex justify-between items-center mb-2" style="padding: 10px;margin-left: auto;margin-bottom: auto;">22 23 <button id="toggleDarkMode" class="mt-4 bg-gray-700 text-white px-4 py-2 rounded-md">Toggle Dark Mode</button>24 25 </div> -->26 <div class="hero-content text-center">27 <div class="flex flex-col w-full md:max-w-xl space-y-3 md:space-y-6">28 <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"29 :class="open30 ? 'text-2xl md:text-3xl lg:text-4xl'31 : 'text-2xl md:text-3xl lg:text-6xl'">32 Text To Code33 </h1>34 <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"35 :class="open36 ? 'text-lg lg:text-xl'37 : 'text-lg lg:text-xl'">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="open44 ? '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 <input type="text">49 <div class="space-y-4">50 <button51 @click="selectModel('mistralai/Mistral-7B-Instruct-v0.1', 'https://mistral.ai/news/announcing-mistral-7b')"52 class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Mistral-7B-Instruct-v0.1</button>53 <button @click="selectModel('tiiuae/falcon-7b-instruct', 'https://www.tii.ae/news')"54 class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">Falcon-7B-Instruct</button>55 </div>56 </div>57 </div>58 59 <form @submit.prevent="generateCode">60 61 62 <div class="lg:col-span-2 p-2">63 <div class="overflow-hidden rounded-xl border border-gray-400">64 <div class="flex p-3">65 <div>66 <div class="flex p-1 text-sm text-gray-600 ">Current Model</div>67 <div class="font-semibold text-black" id="ModelName">Mistral-7B-Instruct-v0.168 </div>69 </div> <button type="button" @click="openModal = true"70 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"><svg71 viewBox="0 0 16 16" width="1.2em" height="1.2em">72 <path fill="currentColor"73 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">74 </path>75 </svg></button>76 </div>77 <div78 class="flex items-center gap-5 rounded-xl bg-gray-300 px-3 py-2 text-xs sm:text-sm text-gray-600 ">79 <a id="PageModel" :href="PageModel" target="_blank" rel="noreferrer"80 class="flex items-center hover:underline"><svg viewBox="0 0 32 32" width="1.2em"81 height="1.2em" class="mr-1.5 shrink-0 text-xs text-gray-400">82 <path fill="currentColor"83 d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path>84 </svg>85 Model86 <div class="max-sm:hidden"> page</div>87 </a> <a :href="WebSiteModel" target="_blank"88 class="ml-auto flex items-center hover:underline" rel="noreferrer"><svg89 viewBox="0 0 32 32" width="1.2em" height="1.2em"90 class="mr-1.5 shrink-0 text-xs text-gray-400">91 <path fill="currentColor"92 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">93 </path>94 </svg>95 Website</a></div>96 </div>97 </div>98 99 100 101 <div class="mb-4 w-full max-w-3xl rounded-lg bg-slate-200">102 <div class="rounded-lg rounded-b-none border border-slate-300 bg-slate-50 px-2 py-2">103 <label for="prompt-input" class="sr-only">Describe your web app</label>104 <textarea id="prompt-input" rows="4"105 class="w-full border-0 bg-slate-50 px-0 text-base text-slate-900 focus:outline-none "106 placeholder="Describe your web app" required></textarea>107 108 </div>109 <label for="api-token" class="sr-only">API Token:</label>110<input class="rounded-lg border border-slate-300 bg-slate-50 w-[90%] px-2 py-2" type="text" id="api-token" placeholder="Enter your huggingface API" required>111 <div class="ml-2 flex items-center py-2">112 <div>113 <button type="submit"114 x-bind:class="{ 'bg-blue-600': !loading, 'bg-gray-400 cursor-not-allowed': loading }"115 x-bind:disabled="loading"116 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">117 <span x-show="!loading">Generate</span>118 <span x-show="loading">Generating...</span>119 <svg x-show="!loading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"120 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"121 stroke-linecap="round" stroke-linejoin="round">122 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>123 <path d="M10 14l11 -11"></path>124 <path125 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">126 </path>127 </svg>128 </button>129 <button type="reset"130 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">131 Cancel132 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24"133 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"134 stroke-linejoin="round">135 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>136 <path d="M18 6l-12 12"></path>137 <path d="M6 6l12 12"></path>138 </svg>139 </button>140 </div>141 </div>142 </div>143 <div144 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">145 <button type="button"146 @click="updateContent('Write Code in html and css for a simple web page')"147 class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">148 Code HTML149 </button>150 <button type="button" @click="updateContent('Write Code in python to print Hello World')"151 class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">152 Code Python153 </button>154 <button type="button"155 @click="updateContent('Write Code in javascript to print Hello World')"156 class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">157 Code Js158 </button>159 <button type="button"160 @click="updateContent('Write Code in HTML+CSS code and login page Using components from Bootstrap CSS framework')"161 class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200">162 Code Login163 </button>164 </div>165 </form>166 167 168 169 </div>170 171 </div>172 173 </div>174 <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"175 :class="{ 'md:w-4/6': open, 'md:w-0': !open }">176 <div class="flex flex-col transition-[width] delay-150 ease-in-out md:h-screen w-full"177 :class="{ 'md:w-4/6': open, 'md:w-0': !open }">178 179 <fram id="iframe" class="border-none w-full md:min-h-screen" src="">180 <div x-show="open" class="relative max-w-2xl mx-auto mt-11">181 <div class="flex space-x-1 rounded-lg" role="tablist" aria-orientation="horizontal">182 <button @click="activeTab = 'code'"183 :class="{ 'bg-white shadow': activeTab === 'code', 'bg-transparent': activeTab !== 'code' }"184 class="flex items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 text-slate-600"185 id="headlessui-tabs-tab-14" role="tab" type="button" aria-selected="false" tabindex="-1"186 data-headlessui-state="" aria-controls="headlessui-tabs-panel-16">187 <svg class="h-5 w-5 flex-none "188 :class="{ 'stroke-slate-600': activeTab !== 'code', 'stroke-sky-500': activeTab == 'code' }"189 fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"190 xmlns="http://www.w3.org/2000/svg">191 <path d="m13.75 6.75 3.5 3.25-3.5 3.25M6.25 13.25 2.75 10l3.5-3.25"></path>192 </svg><span class="sr-only lg:not-sr-only lg:ml-2"193 :class="{ 'text-slate-400': activeTab !== 'code', 'text-slate-600': activeTab == 'code' }">Code</span>194 </button>195 <button @click="activeTab = 'preview'"196 :class="{ 'bg-white shadow': activeTab === 'preview', 'bg-transparent': activeTab !== 'preview' }"197 class="flex items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 text-white"198 id="headlessui-tabs-tab-13" role="tab" type="button" aria-selected="true" tabindex="0"199 data-headlessui-state="selected" aria-controls="headlessui-tabs-panel-15">200 <svg class="h-5 w-5 flex-none"201 :class="{ 'stroke-slate-600': activeTab !== 'preview', 'stroke-sky-500': activeTab == 'preview' }"202 fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"203 xmlns="http://www.w3.org/2000/svg">204 <path205 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">206 </path>207 <circle cx="10" cy="10" r="2.25"></circle>208 </svg><span class="sr-only lg:not-sr-only lg:ml-2"209 :class="{ 'text-slate-400': activeTab !== 'preview', 'text-slate-600': activeTab == 'preview' }">Preview</span>210 </button>211 </div>212 <div id="previewContainer" class="bg-gray-900 text-white p-4 rounded-md"213 x-show="activeTab === 'code'" style="display: none; overflow-y: auto; max-height: 80vh;">214 215 <div class="flex justify-between items-center mb-2">216 <span class="text-gray-400" id="langName">Code:</span>217 <button @click="copyGeneratedCode" data-clipboard-target="#code"218 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">219 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24"220 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"221 stroke-linejoin="round">222 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>223 <path224 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">225 </path>226 <path227 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">228 </path>229 </svg>230 <span class="text-sm font-medium">Copy</span>231 <span class="sr-only">Copy</span>232 </button>233 </div>234 235 <div class="overflow-x-auto">236 <pre id="generated-code" class="text-gray-300">237 <code></code>238 </pre>239 </div>240 </div>241 <div class="bg-gray-900 text-white p-4 rounded-md"242 x-show="activeTab === 'preview' && langName === 'html'">243 <div class="flex justify-between items-center mb-2">244 <span class="text-gray-400" id="langName">Preview:</span>245 <button class="code bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1 rounded-md"246 @click="tryIt">247 Try it248 </button>249 </div>250 <div class="overflow-x-auto">251 <div id="PreviewCode"></div>252 </div>253 </div>254 </div>255 </fram>256 <div x-show="loading" class="flex w-full -mt-20 items-end justify-center pointer-events-none"257 :style="{ 'display': open ? 'block' : 'none' }">258 <div class="flex flex-row py-3 px-8 text-center bg-stone-200 text-stone-600 rounded-md shadow-md">259 <div class="animate-bounce duration-150 mr-1">🤖</div>260 <div>Generating your app..</div>261 </div>262 </div>263 </div>264 </div>265 </div>266 <script>267 function app() {268 return {269 open: false,270 loading: false,271 selectedPrompt: null,272 activeTab: 'code',273 langName: 'Code:',274 isFirstToggle: true,275 openModal: false,276 selectedModel: 'mistralai/Mistral-7B-Instruct-v0.1',277 PageModel: 'https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.1',278 WebSiteModel: 'https://mistral.ai/news/announcing-mistral-7b',279 280 selectModel(model, website) {281 this.selectedModel = model;282 this.PageModel = `https://huggingface.co/${model}`;283 this.WebSiteModel = website;284 this.openModal = false;285 document.getElementById('ModelName').textContent = `${this.selectedModel}`;286 287 },288 init() {289 290 },291 async generateCode() {292 if (this.isFirstToggle) {293 this.open = true;294 this.isFirstToggle = false;295 }296 this.loading = !this.loading;297 const userPrompt = document.getElementById('prompt-input').value;298 const apiToken = document.getElementById('api-token').value;299 const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`;300 try {301 const response = await axios.post(`https://api-inference.huggingface.co/models/${this.selectedModel}`, {302 inputs: htmlFormatPrompt,303 }, {304 headers: {305 'Authorization': `Bearer ${apiToken}`,306 },307 });308 309 let extractedCode = '';310 311 try {312 const generatedTextParts = response.data[0].generated_text.split('```');313 extractedCode = generatedTextParts[1].trim();314 } catch (error) {315 const generatedTextParts = response.data[0].generated_text.split('<div>');316 317 if (generatedTextParts.length > 1) {318 extractedCode = generatedTextParts[1].split('</')[0].trim();319 } else {320 const codeSections = response.data[0].generated_text.split('```');321 322 if (codeSections.length > 1) {323 extractedCode = codeSections[1].trim();324 }325 }326 }327 328 329 if (extractedCode.toLowerCase().includes('<!doctype html>') || extractedCode.toLowerCase().includes('<div>')) {330 this.langName = 'html';331 } else {332 const programmingLanguages = ['html', 'javascript', 'python', 'php', 'c++'];333 programmingLanguages.forEach(lang => {334 if (extractedCode.toLowerCase().includes(lang)) {335 this.langName = lang;336 }337 });338 }339 340 const modifiedCode = extractedCode.replace(new RegExp(this.langName, 'i'), '').trim();341 document.getElementById('generated-code').textContent = modifiedCode;342 document.getElementById('langName').textContent = `${this.langName}`;343 document.getElementById('PreviewCode').innerHTML = modifiedCode;344 345 } catch (error) {346 console.error('Error generating code:', error);347 } finally {348 this.loading = !this.loading;349 }350 },351 updateContent(prompt) {352 document.getElementById('prompt-input').value = prompt;353 },354 copyGeneratedCode() {355 const clipboard = new ClipboardJS('.code', {356 target: function (trigger) {357 return document.getElementById('generated-code');358 }359 });360 361 clipboard.on('success', function (e) {362 console.log('Code copied to clipboard:', e.text);363 clipboard.destroy();364 365 });366 367 clipboard.on('error', function (e) {368 console.error('Error copying code:', e.action);369 370 });371 },372 updatePreviewContent(htmlContent) {373 const previewContainer = document.getElementById('previewContainer');374 375 previewContainer.innerHTML = htmlContent;376 },377 tryIt() {378 const modifiedCode = document.getElementById('PreviewCode').innerHTML;379 380 const previewWindow = window.open('', '_blank');381 previewWindow.document.write(`${modifiedCode}`);382 }383 };384 }385 </script>386</body>387 388</html>