11<!doctype html>
22< html lang ="fr ">
3+
34< head >
45 < meta charset ="utf-8 " />
56 < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
67 < title > Test Sentiment API</ title >
7- < style >
8- body { font-family : system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin : 2rem ; max-width : 800px ; }
9- textarea { width : 100% ; min-height : 120px ; }
10- button { padding : .6rem 1rem ; cursor : pointer; }
11- .result { margin-top : 1rem ; padding : 1rem ; border : 1px solid # ddd ; border-radius : .5rem ; white-space : pre-wrap; }
12- code { background : # f7f7f7 ; padding : .2rem .4rem ; border-radius : .3rem ; }
13- </ style >
8+ <!-- Tailwind CSS CDN -->
9+ < script src ="https://cdn.tailwindcss.com "> </ script >
1410</ head >
15- < body >
16- < h1 > Test de l'API d'analyse de sentiments</ h1 >
17- < p >
18- Tapez un texte et cliquez sur < b > Analyser</ b > . L'API appelle < code > POST /predict</ code > et affiche le JSON de réponse.
19- </ p >
2011
21- < textarea id ="text " placeholder ="I love this product! "> </ textarea > < br > < br >
22- < button id ="btn "> Analyser</ button >
23- < div class ="result " id ="result "> Résultat…</ div >
12+ < body class ="bg-gray-100 min-h-screen flex items-center justify-center ">
13+ < div class ="max-w-2xl w-full bg-white shadow-md rounded-2xl p-8 ">
14+ < h1 class ="text-2xl font-bold mb-4 "> Test de l'API pour l'analyse des sentiments</ h1 >
15+ < p class ="text-gray-700 mb-6 ">
16+ Tapez un texte et cliquez sur < b > Analyser</ b > .
17+ <!-- L'API appelle <code class="bg-gray-100 px-1 py-0.5 rounded">POST /predict</code> et affiche le JSON de réponse. -->
18+ </ p >
19+
20+ < div class ="mb-4 ">
21+ < label for ="text " class ="block font-medium text-gray-800 mb-2 "> Votre texte</ label >
22+ < textarea id ="text " rows ="4 " placeholder ="I love this product! "
23+ class ="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 "> </ textarea >
24+ </ div >
25+
26+ < button id ="btn " class ="bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition ">
27+ Analyser
28+ </ button >
29+
30+ < div class ="mt-6 ">
31+ < h5 class ="text-lg font-semibold "> Résultat</ h5 >
32+ < pre id ="result "
33+ class ="mt-2 border border-gray-300 rounded-lg bg-gray-50 p-4 text-sm text-gray-800 whitespace-pre-wrap ">
34+ Résultat…
35+ </ pre >
36+ </ div >
37+ </ div >
2438
2539 < script >
2640 const btn = document . getElementById ( 'btn' ) ;
@@ -44,4 +58,5 @@ <h1>Test de l'API d'analyse de sentiments</h1>
4458 } ;
4559 </ script >
4660</ body >
61+
4762</ html >
0 commit comments