Spaces:
Sleeping
Sleeping
File size: 2,854 Bytes
f92ef64 6ab076c f92ef64 6ab076c 905c884 f92ef64 6ab076c 263c7f0 1b71f43 6ab076c 1b71f43 6ab076c 263c7f0 1b71f43 f92ef64 1b71f43 6ab076c 1b71f43 6ab076c 1b71f43 6ab076c f92ef64 6ab076c 263c7f0 6ab076c f92ef64 6ab076c 1b71f43 6ab076c 263c7f0 1b71f43 f92ef64 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html>
<html>
<head>
<title>Générateur de contenu avec Gemini et RDKit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>Générateur de contenu avec Gemini et RDKit</h1>
<form method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
<div class="form-group">
<label for="image">Image:</label>
<input type="file" name="image" id="image" class="form-control-file">
</div>
<div class="form-group">
<label for="text_input">Texte:</label>
<textarea name="text_input" id="text_input" class="form-control" ></textarea>
</div>
<button type="submit" class="btn btn-primary">Générer</button>
</form>
<div class="loader" id="loader"></div>
{% if generated_content %}
<div class="row">
<div class="col-md-8">
<h2>Contenu généré:</h2>
<div>
{{ generated_content | safe }}
</div>
</div>
<div class="col-md-4">
<h2>Structures chimiques:</h2>
{% for image_path in image_paths %}
<img src="{{ image_path }}" alt="Structure Chimique" style="max-width:100%; height:auto;"><br>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function showLoader() {
document.getElementById('loader').style.display = 'block';
}
// Optionnel : cacher le loader après le chargement de la page
window.onload = function() {
document.getElementById('loader').style.display = 'none';
};
</script>
</body>
</html> |