|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Intégration API Gradio avec Bootstrap</title> |
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container mt-5"> |
|
|
<div class="row"> |
|
|
<div class="col-12"> |
|
|
<input type="text" id="question" class="form-control" placeholder="Entrez votre question ici"> |
|
|
</div> |
|
|
<div class="col-12 mt-3"> |
|
|
<button onclick="getResponse()" class="btn btn-primary">Soumettre</button> |
|
|
<div id="spinner" class="spinner-border text-primary" role="status" style="display: none;"> |
|
|
<span class="sr-only">Chargement...</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-12 mt-3"> |
|
|
<div id="response" class="border p-3"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script type="module"> |
|
|
import { client } from "@gradio/client"; |
|
|
|
|
|
async function getResponse() { |
|
|
const spinner = document.getElementById('spinner'); |
|
|
const responseDiv = document.getElementById('response'); |
|
|
|
|
|
|
|
|
spinner.style.display = 'inline-block'; |
|
|
responseDiv.innerHTML = ''; |
|
|
|
|
|
const question = document.getElementById('question').value; |
|
|
const app = await client("https://docfile-gemi.hf.space/--replicas/p1sej/"); |
|
|
const result = await app.predict("/predict", [question]); |
|
|
|
|
|
const converter = new showdown.Converter(); |
|
|
const html = converter.makeHtml(result.data); |
|
|
|
|
|
|
|
|
responseDiv.innerHTML = html; |
|
|
spinner.style.display = 'none'; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
