hamzaou/text2code
0
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="open31 ? 'text-2xl md:text-3xl lg:text-4xl'32 : 'text-2xl md:text-3xl lg:text-6xl'">33 Text To Code34 </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="open37 ? '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 <path64 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 Cancel71 <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 HTML87 </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 Python91 </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 Js96 </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 Login100 </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 <path139 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 <path157 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 <path160 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 -->180Try it181 </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 toggle207 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 input217 const userPrompt = document.getElementById('prompt-input').value;218 219 // Ensure the generated code is in HTML format220 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 spaces233 234 // List of programming languages to search for235 if (extractedCode.toLowerCase().includes('<!doctype html>')) {236 this.langName = 'html';237 } else {238 // If not found, search for programming languages239 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 container281 const previewContainer = document.getElementById('previewContainer');282 283 // Set the HTML content284 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.1307 https://api-inference.huggingface.co/models/tiiuae/falcon-7b-instruct308 -->