From ac201aadcfabefad55f6db7c7e6d81c150f33272 Mon Sep 17 00:00:00 2001
From: Julien Dupont <julien.dupont@student-cs.fr>
Date: Tue, 21 May 2024 10:15:56 +0200
Subject: [PATCH] fix responsive

---
 src/App.css |  1 +
 src/App.tsx | 41 +++++++++++++++++++++++++++++++++--------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index fe8d25c..ac52dad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -73,5 +73,6 @@
 
 	.button-container {
 		flex-direction: column;
+		height: 15rem;
 	}
 }
diff --git a/src/App.tsx b/src/App.tsx
index a92746b..5b3366f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import {
 	CreateWebWorkerEngine,
 	EngineInterface,
 	InitProgressReport,
+	hasModelInCache,
 } from '@mlc-ai/web-llm';
 import { appConfig } from './app-config';
 import Progress from './components/Progress';
@@ -28,22 +29,34 @@ function App() {
 	const [runtimeStats, setRuntimeStats] = useState('');
 	const [input, setInput] = useState<string>('');
 	const [output, setOutput] = useState<string>('');
+	const [modelInCache, setModelInCache] = useState<boolean | null>(null);
+
+	// useEffect(() => {
+	// 	if (!engine) {
+	// 		loadEngine();
+	// 	}
+	// }, []);
 
 	useEffect(() => {
-		if (!engine) {
-			loadEngine();
-		}
+		checkModelInCache();
 	}, []);
 
 	const initProgressCallback = (report: InitProgressReport) => {
 		//console.log(report);
-		if (report.text.startsWith('Loading model from cache')) {
-			setOutput('Loading from cache...');
+		if (modelInCache) {
+			setOutput('Chargement du modèle dans la RAM...');
 		} else {
 			setOutput(
 				'Téléchargement des points du modèle dans la cache de votre navigateur, cela peut prendre quelques minutes.'
 			);
 		}
+		// if (report.text.startsWith('Loading model from cache')) {
+		// 	setOutput('Loading from cache...');
+		// } else {
+		// 	setOutput(
+		// 		'Téléchargement des points du modèle dans la cache de votre navigateur, cela peut prendre quelques minutes.'
+		// 	);
+		// }
 
 		if (report.progress !== 0) {
 			setProgressPercentage(report.progress);
@@ -146,14 +159,26 @@ function App() {
 		engine.interruptGenerate();
 	};
 
+	const checkModelInCache = async () => {
+		const isInChache = await hasModelInCache(selectedModel, appConfig);
+		setModelInCache(isInChache);
+		console.log(`${selectedModel} in cache : ${isInChache}`);
+	};
+
 	return (
 		<>
 			<h1>🥐 CroissantLLM</h1>
 			<h2>A Truly Bilingual French-English Language Model</h2>
 
-			{/* <Button variant='light' color='gray' onClick={loadEngine}>
+			<Button variant='light' color='gray' onClick={loadEngine}>
 				Load
-			</Button> */}
+			</Button>
+
+			<Button variant='light' color='gray' onClick={checkModelInCache}>
+				Check Cache
+			</Button>
+
+			{modelInCache && <p>Modèle téléchargé : {modelInCache ? '✅' : '❌'}</p>}
 
 			<div className='textbox-container'>
 				<Textarea
@@ -222,7 +247,7 @@ function App() {
 			</div>
 
 			{progressPercentage !== 0 && (
-				<div className='progress-bars-containerOld'>
+				<div className='progress-bars-container'>
 					<Progress percentage={progressPercentage} />
 				</div>
 			)}