Hugging Face's logo

Spaces:
text2code
/
text_to_code
Running

App Files Community
1
text_to_code / index.html
HAMZA OUBAHIM
adding api required
5d15a57
raw
history blame
18.6 kB
<!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" :class="open
? 'w-full md:w-2/6'
: 'w-full md:w-6/6'">
<div x-show="openModal" class="bg-gray-400 p-6 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/3">
<h2 class="text-lg font-semibold mb-4">Choose Model</h2>
<input type="text">
<div class="space-y-4">
<button
@click="selectModel('mistralai/Mistral-7B-Instruct-v0.1', 'https://mistral.ai/news/announcing-mistral-7b')"
class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Mistral-7B-Instruct-v0.1</button>
<button @click="selectModel('tiiuae/falcon-7b-instruct', 'https://www.tii.ae/news')"
class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">Falcon-7B-Instruct</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">Mistral-7B-Instruct-v0.1
</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="WebSiteModel" 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>
<label for="api-token" class="sr-only">API Token:</label>
<input class="rounded-lg border border-slate-300 bg-slate-50 w-[90%] px-2 py-2" type="text" id="api-token" placeholder="Enter your huggingface API" required>
<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: 'mistralai/Mistral-7B-Instruct-v0.1',
PageModel: 'https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.1',
WebSiteModel: 'https://mistral.ai/news/announcing-mistral-7b',
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 apiToken = document.getElementById('api-token').value;
const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`;
try {
const response = await axios.post(`https://api-inference.huggingface.co/models/${this.selectedModel}`, {
inputs: htmlFormatPrompt,
}, {
headers: {
'Authorization': `Bearer ${apiToken}`,
},
});
let extractedCode = '';
try {
const generatedTextParts = response.data[0].generated_text.split('```');
extractedCode = generatedTextParts[1].trim();
} catch (error) {
const generatedTextParts = response.data[0].generated_text.split('<div>');
if (generatedTextParts.length > 1) {
extractedCode = generatedTextParts[1].split('</')[0].trim();
} else {
const codeSections = response.data[0].generated_text.split('```');
if (codeSections.length > 1) {
extractedCode = codeSections[1].trim();
}
}
}
if (extractedCode.toLowerCase().includes('<!doctype html>') || extractedCode.toLowerCase().includes('<div>')) {
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>