Spaces:

hamzaou
/

text2code

Running

App Files Files Community

hamzaou commited on Dec 9, 2023

Commit

551be09

1 Parent(s): 0e30f31

Upload 5 files

Browse files

Files changed (3) hide show

README.md +3 -3
index.html +301 -64
script.js +31 -0

README.md CHANGED Viewed

@@ -1,8 +1,8 @@
 ---
 title: Text2code
-emoji: 🔥
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---

 ---
 title: Text2code
+emoji: ⚡
+colorFrom: yellow
+colorTo: pink
 sdk: static
 pinned: false
 ---

index.html CHANGED Viewed

@@ -1,71 +1,308 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="flex flex-col md:flex-row" x-data="app()" x-init="init()">
-      <div class="hero md:h-screen bg-stone-100 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="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'">
-              Webapp Factory 🏭
-            </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>
-            <textarea name="promptDraft" x-model="promptDraft" rows="10" placeholder="Describe your web app" class="input w-full rounded text-stone-800 bg-stone-50 border-2 border-stone-400 font-mono text-md md:text-lg h-24 md:h-48"></textarea>
-            <p class="py-1 md:py-2 text-stone-700 text-italic">
-              Examples:
-              <a href="/?prompt=a simple page to compute the BMI using metric units" class="text-bold underline">compute my BMI</a>,
-              <a href="/?prompt=app listing various types of savanna animals, with their photos" class="text-bold underline">photos of savanna animals</a>
-            </p>
-            <button class="btn disabled:text-stone-400 btn-neutral" @click="open = true, prompt = promptDraft, state = state === 'stopped' ? 'loading' : 'stopped', state === 'streaming' ? stopGeneration() : true" :class="promptDraft.length < minPromptSize ? 'btn-neutral' : state === 'stopped' ? 'btn-accent' : 'btn-warning'" :disabled="promptDraft.length < minPromptSize" disabled="disabled">
-              <span x-show="promptDraft.length < minPromptSize">Prompt too short to generate</span>
-              <span x-show="promptDraft.length >= minPromptSize &amp;&amp; state !== 'stopped'" style="display: none;">Stop now</span>
-              <span x-show="promptDraft.length >= minPromptSize &amp;&amp; state === 'stopped'" style="display: none;">Generate!</span>
-            </button>
-            <div class="flex flex-col text-stone-700 space-y-1 md:space-y-2">
-              <p class="text-stone-700">
-                Model used:
-                <a href="https://huggingface.co/WizardLM/WizardCoder-15B-V1.0" class="underline" target="_blank">
-                  WizardCoder-15B-1.0
-                </a>
-              </p>
-              <p>Powered by 🤗 <a href="https://huggingface.co/inference-endpoints" class="underline" target="_blank">Inference Endpoints</a></p>
-              <p class="text-stone-700" x-show="state === 'loading'" style="display: none;">
-                Waiting for the stream to begin (might take a few minutes)..
-              </p>
-              <p class="text-stone-700" x-show="state === 'streaming'" style="display: none;">
-                Content size: <span x-text="humanFileSize(size, true, 2)">0 B</span>. This version generates up
-                to 1686 tokens.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col transition-[width] delay-150 ease-in-out md:h-screen w-full md:w-0" :class="open ? 'w-full md:w-4/6' : 'w-full md:w-0'">
-        <iframe id="iframe" class="border-none w-full md:min-h-screen" :src="!open
-            ? '/placeholder.html'
-            : `/app?prompt=${encodeURIComponent(prompt)}`
-          " src="/placeholder.html"></iframe>
-        <div x-show="state !== 'stopped'" class="flex w-full -mt-20 items-end justify-center pointer-events-none" style="display: 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>
-	</body>
 </html>

 <!DOCTYPE html>
 <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
+ -->

script.js ADDED Viewed

	@@ -0,0 +1,31 @@

+function app() {
+    return {
+        open: false,
+        loading: false,
+        selectedPrompt: null,
+        init() {
+        },
+        async generateCode() {
+            this.open = !this.open;
+            this.loading = !this.loading;
+            const prompt = document.getElementById('prompt-input').value;
+            console.log('Prompt:', prompt);
+            // try {
+            // 	const prompt = document.getElementById('prompt-input').value;
+            // } catch (error) {
+            // 	console.error('Error generating code:', error);
+            // } finally {
+            // 	// Update the loading state
+            // 	this.loading = !this.loading;
+            // }
+        },
+        updateContent(prompt) {
+            document.getElementById('prompt-input').value = prompt;
+        },
+        copyGeneratedCode() {
+            const generatedCodeElement = document.getElementById('generated-code');
+            const codeToCopy = generatedCodeElement.textContent;
+        },
+    };
+}