Spaces:

hamzaou
/

text2code

Running

File size: 13,841 Bytes

<!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
 -->