add modal

index.html

@@ -39,15 +39,18 @@
 						<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">
+					<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>
-							<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 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">
 						
 
@@ -228,9 +231,9 @@
 				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',
+				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;