Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My static Space</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| </head> | |
| <body class="bg-stone-100 dark:bg-gray-800 dark:text-white" x-data="app()"> | |
| <div class="flex flex-col md:flex-row" x-data="app()" x-init="init()"> | |
| <div class="hero rounded-3xl md:h-screen bg-stone-200 transition-[width] delay-150 ease-in-out w-full md:w-6/6" | |
| :class="open ? 'w-full md:w-2/6' : 'w-full md:w-6/6'"> | |
| <!-- <div class="flex justify-between items-center mb-2" style="padding: 10px;margin-left: auto;margin-bottom: auto;"> | |
| <button id="toggleDarkMode" class="mt-4 bg-gray-700 text-white px-4 py-2 rounded-md">Toggle Dark Mode</button> | |
| </div> --> | |
| <div class="hero-content text-center"> | |
| <div class="flex flex-col w-full md:max-w-xl space-y-3 md:space-y-6"> | |
| <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" | |
| :class="open | |
| ? 'text-2xl md:text-3xl lg:text-4xl' | |
| : 'text-2xl md:text-3xl lg:text-6xl'"> | |
| Text To Code | |
| </h1> | |
| <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" | |
| :class="open | |
| ? 'text-lg lg:text-xl' | |
| : 'text-lg lg:text-xl'"> | |
| <p>A space to generate tiny web apps.</p> | |
| <p>In case of hallucination try generating again 🎲</p> | |
| </div> | |
| <form @submit.prevent="generateCode"> | |
| <div class="mb-4 w-full max-w-3xl rounded-lg bg-slate-200"> | |
| <div class="rounded-lg rounded-b-none border border-slate-300 bg-slate-50 px-2 py-2"> | |
| <label for="prompt-input" class="sr-only">Describe your web app</label> | |
| <textarea id="prompt-input" rows="4" | |
| class="w-full border-0 bg-slate-50 px-0 text-base text-slate-900 focus:outline-none " | |
| placeholder="Describe your web app" required></textarea> | |
| </div> | |
| <div class="ml-2 flex items-center py-2"> | |
| <div> | |
| <button type="submit" | |
| x-bind:class="{ 'bg-blue-600': !loading, 'bg-gray-400 cursor-not-allowed': loading }" | |
| x-bind:disabled="loading" | |
| 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"> | |
| <span x-show="!loading">Generate</span> | |
| <span x-show="loading">Generating...</span> | |
| <svg x-show="!loading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" | |
| viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" | |
| stroke-linecap="round" stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | |
| <path d="M10 14l11 -11"></path> | |
| <path | |
| 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"> | |
| </path> | |
| </svg> | |
| </button> | |
| <button type="reset" | |
| 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"> | |
| Cancel | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" | |
| stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" | |
| stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | |
| <path d="M18 6l-12 12"></path> | |
| <path d="M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| <button type="button" | |
| @click="updateContent('Write Code in html and css for a simple web page')" | |
| class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200"> | |
| Code HTML | |
| </button> | |
| <button type="button" @click="updateContent('Write Code in python to print Hello World')" | |
| class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200"> | |
| Code Python | |
| </button> | |
| <button type="button" | |
| @click="updateContent('Write Code in javascript to print Hello World')" | |
| class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200"> | |
| Code Js | |
| </button> | |
| <button type="button" @click="updateContent('Write Code in HTML+CSS code and login page Using components from Bootstrap CSS framework')" | |
| class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200"> | |
| Code Login | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <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 }" > | |
| <div class="flex flex-col transition-[width] delay-150 ease-in-out md:h-screen w-full" | |
| :class="{ 'md:w-4/6': open, 'md:w-0': !open }"> | |
| <fram id="iframe" class="border-none w-full md:min-h-screen" src=""> | |
| <div x-show="open" class="relative max-w-2xl mx-auto mt-11"> | |
| <div class="flex space-x-1 rounded-lg" role="tablist" aria-orientation="horizontal"> | |
| <button @click="activeTab = 'code'" | |
| :class="{ 'bg-white shadow': activeTab === 'code', 'bg-transparent': activeTab !== 'code' }" | |
| class="flex items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 text-slate-600" | |
| id="headlessui-tabs-tab-14" role="tab" type="button" aria-selected="false" tabindex="-1" | |
| data-headlessui-state="" aria-controls="headlessui-tabs-panel-16"> | |
| <svg class="h-5 w-5 flex-none " | |
| :class="{ 'stroke-slate-600': activeTab !== 'code', 'stroke-sky-500': activeTab == 'code' }" | |
| fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path d="m13.75 6.75 3.5 3.25-3.5 3.25M6.25 13.25 2.75 10l3.5-3.25"></path> | |
| </svg><span class="sr-only lg:not-sr-only lg:ml-2" | |
| :class="{ 'text-slate-400': activeTab !== 'code', 'text-slate-600': activeTab == 'code' }">Code</span> | |
| </button> | |
| <button @click="activeTab = 'preview'" | |
| :class="{ 'bg-white shadow': activeTab === 'preview', 'bg-transparent': activeTab !== 'preview' }" | |
| class="flex items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 text-white" | |
| id="headlessui-tabs-tab-13" role="tab" type="button" aria-selected="true" tabindex="0" | |
| data-headlessui-state="selected" aria-controls="headlessui-tabs-panel-15"> | |
| <svg class="h-5 w-5 flex-none" | |
| :class="{ 'stroke-slate-600': activeTab !== 'preview', 'stroke-sky-500': activeTab == 'preview' }" | |
| fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| 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"> | |
| </path> | |
| <circle cx="10" cy="10" r="2.25"></circle> | |
| </svg><span class="sr-only lg:not-sr-only lg:ml-2" | |
| :class="{ 'text-slate-400': activeTab !== 'preview', 'text-slate-600': activeTab == 'preview' }">Preview</span> | |
| </button> | |
| </div> | |
| <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;"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400" id="langName">Code:</span> | |
| <button @click="copyGeneratedCode" data-clipboard-target="#code" | |
| 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"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" | |
| stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" | |
| stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | |
| <path | |
| 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"> | |
| </path> | |
| <path | |
| 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"> | |
| </path> | |
| </svg> | |
| <span class="text-sm font-medium">Copy</span> | |
| <span class="sr-only">Copy</span> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <pre id="generated-code" class="text-gray-300"> | |
| <code></code> | |
| </pre> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 text-white p-4 rounded-md" | |
| x-show="activeTab === 'preview' && langName === 'html'"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400" id="langName">Preview:</span> | |
| <button class="code bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1 rounded-md" @click="tryIt"> | |
| <!-- i want this button show result in another window --> | |
| Try it | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <div id="PreviewCode"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </fram> | |
| <div x-show="loading" class="flex w-full -mt-20 items-end justify-center pointer-events-none" | |
| :style="{ 'display': open ? 'block' : 'none' }"> | |
| <div class="flex flex-row py-3 px-8 text-center bg-stone-200 text-stone-600 rounded-md shadow-md"> | |
| <div class="animate-bounce duration-150 mr-1">🤖</div> | |
| <div>Generating your app..</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div></div> | |
| <script> | |
| function app() { | |
| return { | |
| open: false, | |
| loading: false, | |
| selectedPrompt: null, | |
| activeTab: 'code', | |
| langName: 'Code:', | |
| isFirstToggle: true, // Added a flag to track the first toggle | |
| init() { | |
| }, | |
| async generateCode() { | |
| if (this.isFirstToggle) { | |
| this.open = true; | |
| this.isFirstToggle = false; | |
| } | |
| this.loading = !this.loading; | |
| // Get the prompt value from the input | |
| const userPrompt = document.getElementById('prompt-input').value; | |
| // Ensure the generated code is in HTML format | |
| const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`; | |
| console.log('Prompt:', htmlFormatPrompt); | |
| try { | |
| const response = await axios.post('https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1', { | |
| inputs: htmlFormatPrompt, | |
| }, { | |
| headers: { | |
| 'Authorization': 'Bearer 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', | |
| }, | |
| }); | |
| // console.log('Response:', response.data[0].generated_text); | |
| const generatedTextParts = response.data[0].generated_text.split('```'); | |
| const extractedCode = generatedTextParts[1].trim(); // Trim to remove leading/trailing spaces | |
| // List of programming languages to search for | |
| if (extractedCode.toLowerCase().includes('<!doctype html>')) { | |
| this.langName = 'html'; | |
| } else { | |
| // If not found, search for programming languages | |
| const programmingLanguages = ['html', 'javascript', 'python', 'php', 'c++']; | |
| programmingLanguages.forEach(lang => { | |
| if (extractedCode.toLowerCase().includes(lang)) { | |
| this.langName = lang; | |
| } | |
| }); | |
| } | |
| const modifiedCode = extractedCode.replace(new RegExp(this.langName, 'i'), '').trim(); | |
| document.getElementById('generated-code').textContent = modifiedCode; | |
| document.getElementById('langName').textContent = `${this.langName}`; | |
| document.getElementById('PreviewCode').innerHTML = modifiedCode; | |
| } catch (error) { | |
| console.error('Error generating code:', error); | |
| } finally { | |
| this.loading = !this.loading; | |
| } | |
| }, | |
| updateContent(prompt) { | |
| document.getElementById('prompt-input').value = prompt; | |
| }, | |
| copyGeneratedCode() { | |
| const clipboard = new ClipboardJS('.code', { | |
| target: function (trigger) { | |
| return document.getElementById('generated-code'); | |
| } | |
| }); | |
| clipboard.on('success', function (e) { | |
| console.log('Code copied to clipboard:', e.text); | |
| clipboard.destroy(); | |
| }); | |
| clipboard.on('error', function (e) { | |
| console.error('Error copying code:', e.action); | |
| }); | |
| }, | |
| updatePreviewContent(htmlContent) { | |
| // Get the preview container | |
| const previewContainer = document.getElementById('previewContainer'); | |
| // Set the HTML content | |
| previewContainer.innerHTML = htmlContent; | |
| }, | |
| tryIt() { | |
| const modifiedCode = document.getElementById('PreviewCode').innerHTML; | |
| const previewWindow = window.open('', '_blank'); | |
| previewWindow.document.write(`${modifiedCode}`) ; | |
| } | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| <!-- | |
| https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1 | |
| https://api-inference.huggingface.co/models/tiiuae/falcon-7b-instruct | |
| --> |