101 lines
2.5 KiB
HTML
101 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>AI Models</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Lista modeli AI</h2>
|
|
|
|
<div id="models-container">
|
|
{% for name, model in models.items() %}
|
|
<div class="model-card" id="model-{{name}}">
|
|
|
|
<!-- 3 KROPKI -->
|
|
<div class="menu-btn" onclick="toggleMenu('{{name}}')">⋮</div>
|
|
|
|
<!-- WYSUWANY PANEL -->
|
|
<div class="side-menu" id="menu-{{name}}">
|
|
<h4>Akcje modelu</h4>
|
|
|
|
<input type="text" value="{{name}}" readonly>
|
|
|
|
<button onclick="goToEditor('{{name}}')">
|
|
Edytor kodu
|
|
</button>
|
|
|
|
<button onclick="toggleMenu('{{name}}')">
|
|
Zamknij
|
|
</button>
|
|
</div>
|
|
|
|
<!-- NAZWA -->
|
|
<h3>{{name}}</h3>
|
|
|
|
<!-- OPIS (Markdown -> HTML) -->
|
|
<div class="description">
|
|
{{ model.md_content | safe }}
|
|
</div>
|
|
|
|
<!-- FORMULARZ -->
|
|
<form class="predict-form">
|
|
{% for inp in model.inputs %}
|
|
<label>{{inp}}:</label>
|
|
<input name="{{inp}}">
|
|
{% endfor %}
|
|
<button type="submit">Wyślij</button>
|
|
</form>
|
|
|
|
<!-- OUTPUT -->
|
|
<div class="output" id="output-{{name}}"></div>
|
|
|
|
<!-- DOWNLOAD -->
|
|
{% if model.meta.downloadable %}
|
|
<div class="download">
|
|
<a href="/download/{{name}}/model.py" target="_blank">model.py</a> |
|
|
<a href="/download/{{name}}/description.md" target="_blank">description.md</a> |
|
|
<a href="/download/{{name}}/meta.json" target="_blank">meta.json</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
/* ---- PREDICT ---- */
|
|
document.querySelectorAll(".predict-form").forEach(form => {
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const parent = e.target.closest(".model-card");
|
|
const modelName = parent.id.replace("model-", "");
|
|
const outputDiv = parent.querySelector(".output");
|
|
|
|
const formData = new FormData(form);
|
|
const response = await fetch(`/predict/${modelName}`, {
|
|
method: "POST",
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
outputDiv.textContent = data.output;
|
|
});
|
|
});
|
|
|
|
/* ---- MENU ---- */
|
|
function toggleMenu(name) {
|
|
const menu = document.getElementById("menu-" + name);
|
|
menu.classList.toggle("open");
|
|
}
|
|
|
|
/* ---- EDITOR ---- */
|
|
function goToEditor(name) {
|
|
window.location.href = `/editor/${name}`;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|