Spaces:

text2code
/

text_to_code

Running

App Files Files Community

SALAH-ELHINT commited on Dec 9, 2023

Commit

a4d5b4d

1 Parent(s): 535b258

text_to_code

Browse files

Files changed (2) hide show

index.html +323 -16
style.css +0 -28

index.html CHANGED Viewed

@@ -1,19 +1,326 @@
 <!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="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
-	</body>
-</html>

 <!DOCTYPE html>
 <html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title>My static Space</title>
+	<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>
+					<div x-show="openModal" @click.away="openModal = false" class=" fixed inset-0 z-50 overflow-auto bg-smoke-light flex items-center justify-center">
+						<div x-show="openModal" class="bg-gray-400 p-6 rounded shadow-md">
+							<h2 class="text-lg font-semibold mb-4">Choose Model</h2>
+							<div>
+								<button @click="selectModel('tiiuae/falcon-7b-instruct', 'https://about.fb.com/news/2023/08/code-llama-ai-for-coding')">tiiuae/falcon-7b-instruct</button><br>
+								<button @click="selectModel('mistralai/Mistral-7B-Instruct-v0.1', 'https://mistral.ai/news/announcing-mistral-7b')">models/mistralai/Mistral-7B-Instruct-v0.1</button>
+							</div>
+						</div>
+					</div>
+					<form @submit.prevent="generateCode">
+						<div class="lg:col-span-2 p-2"> <div class="overflow-hidden rounded-xl border border-gray-400"><div class="flex p-3"><div><div class="flex p-1 text-sm text-gray-600 ">Current Model</div> <div class="font-semibold text-black" id="ModelName">codellama/CodeLlama-34b-Instruct-hf</div></div> <button type="button" @click="openModal = true"  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 viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" 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"></path></svg></button></div> <div class="flex items-center gap-5 rounded-xl bg-gray-300 px-3 py-2 text-xs sm:text-sm text-gray-600  "><a id="PageModel" :href="PageModel" target="_blank" rel="noreferrer" class="flex items-center hover:underline"><svg viewBox="0 0 32 32" width="1.2em" height="1.2em" class="mr-1.5 shrink-0 text-xs text-gray-400"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg>
+							Model
+							<div class="max-sm:hidden">&nbsp;page</div></a>  <a href="https://about.fb.com/news/2023/08/code-llama-ai-for-coding/" target="_blank" class="ml-auto flex items-center hover:underline" rel="noreferrer"><svg viewBox="0 0 32 32" width="1.2em" height="1.2em" class="mr-1.5 shrink-0 text-xs text-gray-400"><path fill="currentColor" 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"></path></svg>
+								Website</a></div></div></div>
+						<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">
+									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,
+				openModal: false,
+				selectedModel: 'codellama/CodeLlama-34b-Instruct-hf',
+				PageModel: 'https://huggingface.co/codellama/CodeLlama-34b-Instruct-hf',
+				WebSiteModel: 'https://about.fb.com/news/2023/08/code-llama-ai-for-coding',
+				selectModel(model, website) {
+					this.selectedModel = model;
+					this.PageModel = `https://huggingface.co/${model}`;
+					this.WebSiteModel = website;
+					this.openModal = false;
+					document.getElementById('ModelName').textContent = `${this.selectedModel}`;
+				},
+				init() {
+				},
+				async generateCode() {
+					if (this.isFirstToggle) {
+						this.open = true;
+						this.isFirstToggle = false;
+					}
+					this.loading = !this.loading;
+					const userPrompt = document.getElementById('prompt-input').value;
+					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/${this.selectedModel}`, {
+							inputs: htmlFormatPrompt,
+						}, {
+							headers: {
+								'Authorization': 'Bearer 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',
+							},
+						});
+						const generatedTextParts = response.data[0].generated_text.split('```');
+						const extractedCode = generatedTextParts[1].trim();  // Trim to remove leading/trailing spaces
+						if (extractedCode.toLowerCase().includes('<!doctype html>')) {
+							this.langName = 'html';
+						} else {
+							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) {
+					const previewContainer = document.getElementById('previewContainer');
+					previewContainer.innerHTML = htmlContent;
+				},
+				tryIt() {
+					const modifiedCode = document.getElementById('PreviewCode').innerHTML;
+					const previewWindow = window.open('', '_blank');
+					previewWindow.document.write(`${modifiedCode}`);
+				}
+			};
+		}
+	</script>
+</body>
+</html>

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}