|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Gradio Integration Example</title> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Gradio Integration</h1> |
|
|
|
|
|
<input type="text" id="inputText" placeholder="Enter your text"> |
|
|
<input type="file" id="inputImage" accept="image/*"> |
|
|
<button id="predictButton">Predict</button> |
|
|
<p id="result"></p> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
import { client } from "@gradio/client"; |
|
|
|
|
|
const inputText = document.getElementById('inputText'); |
|
|
const inputImage = document.getElementById('inputImage'); |
|
|
const predictButton = document.getElementById('predictButton'); |
|
|
const resultElement = document.getElementById('result'); |
|
|
|
|
|
async function runExample() { |
|
|
const app = await client("https://docfile-mariam-physique1.hf.space/--replicas/ptlbx/"); |
|
|
|
|
|
predictButton.addEventListener('click', async () => { |
|
|
const text = inputText.value; |
|
|
const imageFile = inputImage.files[0]; |
|
|
const imageData = await imageFile.arrayBuffer(); |
|
|
|
|
|
const result = await app.predict("/predict", [text, imageData]); |
|
|
resultElement.textContent = JSON.stringify(result.data); |
|
|
}); |
|
|
} |
|
|
|
|
|
runExample(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
