remove local testers
This commit is contained in:
parent
fd0fba6823
commit
89063a38b1
2 changed files with 0 additions and 863 deletions
|
|
@ -1,563 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>ЕГЭ Английский — Аудирование</title>
|
|
||||||
<style>
|
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
:root {
|
|
||||||
--bg: #f5f4f0;
|
|
||||||
--surface: #ffffff;
|
|
||||||
--border: #e0ddd6;
|
|
||||||
--border2: #c8c5bc;
|
|
||||||
--text: #1a1a18;
|
|
||||||
--muted: #6b6a65;
|
|
||||||
--accent: #2d5be3;
|
|
||||||
--ok: #1a7a45;
|
|
||||||
--ok-bg: #e8f5ee;
|
|
||||||
--err: #b92c2c;
|
|
||||||
--err-bg: #fdeaea;
|
|
||||||
--warn: #8a5c00;
|
|
||||||
--warn-bg: #fff8e6;
|
|
||||||
--radius: 10px;
|
|
||||||
--radius-sm: 6px;
|
|
||||||
}
|
|
||||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; }
|
|
||||||
.container { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 4rem; }
|
|
||||||
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
|
|
||||||
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 2rem; }
|
|
||||||
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
|
|
||||||
.card-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
|
|
||||||
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
|
|
||||||
input[type=text], input[type=password], textarea, select {
|
|
||||||
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
|
|
||||||
font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
|
|
||||||
outline: none; transition: border-color 0.15s;
|
|
||||||
}
|
|
||||||
input:focus, textarea:focus { border-color: var(--accent); }
|
|
||||||
textarea { resize: vertical; min-height: 80px; }
|
|
||||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
||||||
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
|
|
||||||
.field { margin-bottom: 12px; }
|
|
||||||
button {
|
|
||||||
padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border2);
|
|
||||||
background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
|
|
||||||
cursor: pointer; transition: all 0.15s;
|
|
||||||
}
|
|
||||||
button:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
|
|
||||||
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|
||||||
.btn-primary:hover { background: #1e4ac9; color: #fff; border-color: #1e4ac9; }
|
|
||||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
||||||
.drop-zone {
|
|
||||||
border: 2px dashed var(--border2); border-radius: var(--radius); padding: 2rem;
|
|
||||||
text-align: center; cursor: pointer; color: var(--muted); font-size: 13px;
|
|
||||||
position: relative; transition: all 0.15s;
|
|
||||||
}
|
|
||||||
.drop-zone:hover, .drop-zone.over { border-color: var(--accent); color: var(--accent); background: #f0f4ff; }
|
|
||||||
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
|
|
||||||
.drop-zone .icon { font-size: 28px; margin-bottom: 8px; }
|
|
||||||
.file-info { margin-top: 10px; padding: 8px 12px; background: var(--ok-bg); border-radius: var(--radius-sm); font-size: 13px; color: var(--ok); }
|
|
||||||
.step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 1rem; }
|
|
||||||
.step-num { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
|
|
||||||
.step-num.done { background: var(--ok); }
|
|
||||||
.step-num.pending { background: var(--border2); color: var(--muted); }
|
|
||||||
.step-body { flex: 1; }
|
|
||||||
.step-title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
|
|
||||||
.answers-grid { display: grid; gap: 6px; }
|
|
||||||
.answer-row { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; align-items: center; font-size: 13px; }
|
|
||||||
.answer-row .task-label { color: var(--muted); font-weight: 500; }
|
|
||||||
.answer-row input { padding: 5px 8px; }
|
|
||||||
.section-header { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; }
|
|
||||||
.log { background: #1a1a18; color: #e8e6e0; border-radius: var(--radius); padding: 1rem; font-family: 'Menlo', 'Monaco', monospace; font-size: 12px; line-height: 1.8; max-height: 200px; overflow-y: auto; white-space: pre-wrap; }
|
|
||||||
.log .ok { color: #6ee7a0; }
|
|
||||||
.log .err { color: #f87171; }
|
|
||||||
.log .info { color: #93c5fd; }
|
|
||||||
.result-card { border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
|
|
||||||
.result-block { margin-bottom: 1.5rem; }
|
|
||||||
.result-block h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
|
|
||||||
table.check-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
||||||
table.check-table th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
|
|
||||||
table.check-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
|
|
||||||
table.check-table tr:last-child td { border-bottom: none; }
|
|
||||||
.mark-ok { color: var(--ok); font-weight: 600; }
|
|
||||||
.mark-err { color: var(--err); font-weight: 600; }
|
|
||||||
.score-pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
|
|
||||||
.score-pill.ok { background: var(--ok-bg); color: var(--ok); }
|
|
||||||
.score-pill.mid { background: var(--warn-bg); color: var(--warn); }
|
|
||||||
.score-pill.low { background: var(--err-bg); color: var(--err); }
|
|
||||||
.total-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; }
|
|
||||||
.total-score { font-size: 36px; font-weight: 700; }
|
|
||||||
.total-label { font-size: 13px; color: var(--muted); }
|
|
||||||
.errors-list { font-size: 13px; }
|
|
||||||
.error-item { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--err); }
|
|
||||||
.error-item:last-child { border-bottom: none; }
|
|
||||||
.transcript-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; font-size: 13px; line-height: 1.7; color: var(--text); max-height: 200px; overflow-y: auto; white-space: pre-wrap; }
|
|
||||||
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 20px; }
|
|
||||||
.badge-ok { background: var(--ok-bg); color: var(--ok); }
|
|
||||||
.badge-err { background: var(--err-bg); color: var(--err); }
|
|
||||||
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
#result-section { display: none; }
|
|
||||||
.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<h1>ЕГЭ — Аудирование (Английский язык)</h1>
|
|
||||||
<p class="subtitle">Загрузи аудиозапись ответов ученика → получи транскрипт → сверь с ключами → баллы</p>
|
|
||||||
|
|
||||||
<!-- API Settings -->
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-title">Настройки API</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="field">
|
|
||||||
<label>Whisper эндпоинт (STT)</label>
|
|
||||||
<input type="text" id="whisper-url" value="https://api.openai.com/v1/audio/transcriptions" placeholder="https://...">
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label>LLM эндпоинт (проверка)</label>
|
|
||||||
<input type="text" id="llm-url" value="https://llm.lambda.coredump.ru/v1" placeholder="https://...">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="field">
|
|
||||||
<label>API Key (Whisper)</label>
|
|
||||||
<input type="password" id="whisper-key" placeholder="sk-...">
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label>API Key (LLM)</label>
|
|
||||||
<input type="password" id="llm-key" placeholder="ключ если нужен">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label>Модель LLM</label>
|
|
||||||
<input type="text" id="llm-model" value="openai/Qwen3.5-122B-A10B" placeholder="имя модели">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 1: Audio -->
|
|
||||||
<div class="card">
|
|
||||||
<div class="step">
|
|
||||||
<div class="step-num" id="step1-num">1</div>
|
|
||||||
<div class="step-body">
|
|
||||||
<div class="step-title">Загрузи аудиозапись ответов ученика</div>
|
|
||||||
<div class="drop-zone" id="audio-drop">
|
|
||||||
<div class="icon">🎤</div>
|
|
||||||
<div>Нажми или перетащи аудиофайл</div>
|
|
||||||
<div style="font-size:11px;margin-top:4px;color:var(--muted)">MP3, WAV, M4A, OGG, WEBM — до 25 МБ</div>
|
|
||||||
<input type="file" id="audio-file" accept="audio/*" onchange="handleAudio(this.files[0])">
|
|
||||||
</div>
|
|
||||||
<div id="audio-info" style="display:none" class="file-info"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 2: Keys -->
|
|
||||||
<div class="card">
|
|
||||||
<div class="step">
|
|
||||||
<div class="step-num pending" id="step2-num">2</div>
|
|
||||||
<div class="step-body">
|
|
||||||
<div class="step-title">Введи правильные ответы (ключи)</div>
|
|
||||||
<p style="font-size:12px;color:var(--muted);margin-bottom:12px">Заполни ключи для заданий, которые есть в варианте. Пустые задания игнорируются.</p>
|
|
||||||
|
|
||||||
<div class="section-header">
|
|
||||||
<span>Задание</span><span>Ключ (верный)</span><span>— пусто —</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="font-size:12px;font-weight:600;color:var(--muted);margin:8px 0 4px">Задание 1 — Соответствие (A–F → цифра 1–7)</div>
|
|
||||||
<div class="answers-grid" id="keys-b1">
|
|
||||||
<!-- A-F rows generated by JS -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 4px">Задания 2–9 — True(1) / False(2) / Not Stated(3)</div>
|
|
||||||
<div class="answers-grid" id="keys-b2">
|
|
||||||
<!-- 2-9 rows -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 4px">Задания 10–18 — Выбор из 3 вариантов (1/2/3)</div>
|
|
||||||
<div class="answers-grid" id="keys-c1">
|
|
||||||
<!-- 10-18 rows -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Run button -->
|
|
||||||
<div style="display:flex;gap:10px;margin-bottom:1.5rem">
|
|
||||||
<button class="btn-primary" id="run-btn" onclick="runCheck()" disabled>
|
|
||||||
Распознать и проверить →
|
|
||||||
</button>
|
|
||||||
<button onclick="resetAll()">Сбросить</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Log -->
|
|
||||||
<div id="log-section" style="display:none;margin-bottom:1rem">
|
|
||||||
<div class="log" id="log"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Results -->
|
|
||||||
<div id="result-section">
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-title">Транскрипт ответов ученика</div>
|
|
||||||
<div class="transcript-box" id="transcript-box"></div>
|
|
||||||
<div style="margin-top:8px">
|
|
||||||
<div class="card-title" style="margin-bottom:4px">Распознанные ответы</div>
|
|
||||||
<div class="transcript-box" id="parsed-answers-box" style="font-family:monospace"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card" id="result-detail">
|
|
||||||
<div class="card-title">Детальная проверка</div>
|
|
||||||
|
|
||||||
<div class="result-block">
|
|
||||||
<h3>Задание 1 — Установление соответствия <span id="score-b1-pill" class="score-pill"></span></h3>
|
|
||||||
<table class="check-table">
|
|
||||||
<thead><tr><th>Высказывание</th><th>Ответ ученика</th><th>Ключ</th><th>Результат</th></tr></thead>
|
|
||||||
<tbody id="table-b1"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="divider">
|
|
||||||
|
|
||||||
<div class="result-block">
|
|
||||||
<h3>Задания 2–9 — True / False / Not Stated <span id="score-b2-pill" class="score-pill"></span></h3>
|
|
||||||
<table class="check-table">
|
|
||||||
<thead><tr><th>Задание</th><th>Ответ ученика</th><th>Ключ</th><th>Результат</th></tr></thead>
|
|
||||||
<tbody id="table-b2"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="divider">
|
|
||||||
|
|
||||||
<div class="result-block">
|
|
||||||
<h3>Задания 10–18 — Выбор ответа <span id="score-c1-pill" class="score-pill"></span></h3>
|
|
||||||
<table class="check-table">
|
|
||||||
<thead><tr><th>Задание</th><th>Ответ ученика</th><th>Ключ</th><th>Результат</th></tr></thead>
|
|
||||||
<tbody id="table-c1"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="total-box card">
|
|
||||||
<div>
|
|
||||||
<div class="total-label">Итоговый балл</div>
|
|
||||||
<div class="total-score" id="total-score">—</div>
|
|
||||||
<div class="total-label" id="total-label">из 23 первичных баллов</div>
|
|
||||||
</div>
|
|
||||||
<div style="text-align:right">
|
|
||||||
<div class="total-label" style="margin-bottom:4px">Ошибки</div>
|
|
||||||
<div id="errors-summary" class="errors-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let audioFile = null;
|
|
||||||
let audioFileName = '';
|
|
||||||
|
|
||||||
// Build key input rows
|
|
||||||
function buildKeyRows() {
|
|
||||||
const b1 = document.getElementById('keys-b1');
|
|
||||||
['A','B','C','D','E','F'].forEach(letter => {
|
|
||||||
b1.innerHTML += `<div class="answer-row">
|
|
||||||
<span class="task-label">Задание 1${letter}</span>
|
|
||||||
<input type="text" id="key-b1-${letter}" maxlength="1" placeholder="1–7" style="width:60px">
|
|
||||||
<span></span>
|
|
||||||
</div>`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const b2 = document.getElementById('keys-b2');
|
|
||||||
for (let i = 2; i <= 9; i++) {
|
|
||||||
b2.innerHTML += `<div class="answer-row">
|
|
||||||
<span class="task-label">Задание ${i}</span>
|
|
||||||
<input type="text" id="key-b2-${i}" maxlength="1" placeholder="1/2/3" style="width:60px">
|
|
||||||
<span></span>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const c1 = document.getElementById('keys-c1');
|
|
||||||
for (let i = 10; i <= 18; i++) {
|
|
||||||
c1.innerHTML += `<div class="answer-row">
|
|
||||||
<span class="task-label">Задание ${i}</span>
|
|
||||||
<input type="text" id="key-c1-${i}" maxlength="1" placeholder="1/2/3" style="width:60px">
|
|
||||||
<span></span>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleAudio(file) {
|
|
||||||
if (!file) return;
|
|
||||||
audioFile = file;
|
|
||||||
audioFileName = file.name;
|
|
||||||
const info = document.getElementById('audio-info');
|
|
||||||
info.style.display = 'block';
|
|
||||||
info.textContent = `✓ ${file.name} (${(file.size/1024/1024).toFixed(1)} МБ)`;
|
|
||||||
document.getElementById('step1-num').classList.add('done');
|
|
||||||
document.getElementById('step2-num').classList.remove('pending');
|
|
||||||
document.getElementById('run-btn').disabled = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Drag & drop
|
|
||||||
const dropZone = document.getElementById('audio-drop');
|
|
||||||
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('over'); });
|
|
||||||
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('over'));
|
|
||||||
dropZone.addEventListener('drop', e => {
|
|
||||||
e.preventDefault(); dropZone.classList.remove('over');
|
|
||||||
const f = e.dataTransfer.files[0];
|
|
||||||
if (f) { document.getElementById('audio-file').files; handleAudio(f); }
|
|
||||||
});
|
|
||||||
|
|
||||||
function log(msg, type='') {
|
|
||||||
const el = document.getElementById('log');
|
|
||||||
document.getElementById('log-section').style.display = '';
|
|
||||||
const span = document.createElement('span');
|
|
||||||
span.className = type;
|
|
||||||
span.textContent = msg + '\n';
|
|
||||||
el.appendChild(span);
|
|
||||||
el.scrollTop = el.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getKeys() {
|
|
||||||
const b1 = {};
|
|
||||||
['A','B','C','D','E','F'].forEach(l => {
|
|
||||||
const v = document.getElementById(`key-b1-${l}`).value.trim();
|
|
||||||
if (v) b1[l] = v;
|
|
||||||
});
|
|
||||||
const b2 = {};
|
|
||||||
for (let i = 2; i <= 9; i++) {
|
|
||||||
const v = document.getElementById(`key-b2-${i}`).value.trim();
|
|
||||||
if (v) b2[i] = v;
|
|
||||||
}
|
|
||||||
const c1 = {};
|
|
||||||
for (let i = 10; i <= 18; i++) {
|
|
||||||
const v = document.getElementById(`key-c1-${i}`).value.trim();
|
|
||||||
if (v) c1[i] = v;
|
|
||||||
}
|
|
||||||
return { b1, b2, c1 };
|
|
||||||
}
|
|
||||||
|
|
||||||
async function transcribeAudio(file) {
|
|
||||||
const url = document.getElementById('whisper-url').value.trim();
|
|
||||||
const key = document.getElementById('whisper-key').value.trim();
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', file, file.name);
|
|
||||||
formData.append('model', 'whisper-1');
|
|
||||||
formData.append('language', 'en');
|
|
||||||
formData.append('prompt', 'Student answers to English listening exam: task 1 matching A B C D E F with numbers 1-7, tasks 2-9 True False Not Stated as 1 2 or 3, tasks 10-18 multiple choice 1 2 or 3.');
|
|
||||||
|
|
||||||
const headers = {};
|
|
||||||
if (key) headers['Authorization'] = 'Bearer ' + key;
|
|
||||||
|
|
||||||
const resp = await fetch(url, { method: 'POST', headers, body: formData });
|
|
||||||
if (!resp.ok) throw new Error('Whisper error: ' + resp.status + ' ' + await resp.text());
|
|
||||||
const data = await resp.json();
|
|
||||||
return data.text || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function parseAnswersWithLLM(transcript, keys) {
|
|
||||||
const url = document.getElementById('llm-url').value.trim().replace(/\/$/, '');
|
|
||||||
const model = document.getElementById('llm-model').value.trim();
|
|
||||||
const key = document.getElementById('llm-key').value.trim();
|
|
||||||
|
|
||||||
const keysText = JSON.stringify(keys, null, 2);
|
|
||||||
|
|
||||||
const prompt = `You are grading a Russian EGE English listening exam.
|
|
||||||
|
|
||||||
The student recorded their answers verbally. Here is the transcript:
|
|
||||||
"""
|
|
||||||
${transcript}
|
|
||||||
"""
|
|
||||||
|
|
||||||
Extract the student's answers for each task. The exam structure:
|
|
||||||
- Task 1 (matching): letters A,B,C,D,E,F each matched to a number 1-7
|
|
||||||
- Tasks 2-9 (True/False/Not Stated): answers are 1 (True), 2 (False), or 3 (Not Stated)
|
|
||||||
- Tasks 10-18 (multiple choice): answers are 1, 2, or 3
|
|
||||||
|
|
||||||
The teacher's answer key is:
|
|
||||||
${keysText}
|
|
||||||
|
|
||||||
Now compare student answers to the key and return ONLY valid JSON, no markdown:
|
|
||||||
{
|
|
||||||
"transcript_clean": "cleaned up version of student answers",
|
|
||||||
"student_answers": {
|
|
||||||
"b1": {"A":"3","B":"1","C":"5","D":"7","E":"2","F":"4"},
|
|
||||||
"b2": {"2":"1","3":"2","4":"1","5":"3","6":"2","7":"1","8":"3","9":"2"},
|
|
||||||
"c1": {"10":"2","11":"1","12":"3","13":"1","14":"2","15":"3","16":"1","17":"2","18":"1"}
|
|
||||||
},
|
|
||||||
"results": {
|
|
||||||
"b1": {"A":true,"B":false,"C":true,"D":true,"E":true,"F":true},
|
|
||||||
"b2": {"2":true,"3":false,"4":true,"5":true,"6":false,"7":true,"8":true,"9":true},
|
|
||||||
"c1": {"10":true,"11":true,"12":false,"13":true,"14":true,"15":true,"16":true,"17":false,"18":true}
|
|
||||||
},
|
|
||||||
"scores": {
|
|
||||||
"b1": 5,
|
|
||||||
"b2": 6,
|
|
||||||
"c1": 7,
|
|
||||||
"total": 18
|
|
||||||
},
|
|
||||||
"errors": [
|
|
||||||
"Задание 1B: ученик ответил 5, верный ответ 1",
|
|
||||||
"Задание 6: ученик ответил 1, верный ответ 2"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
Only include tasks that have keys provided. If student answer is unclear, mark it as "?" and count as wrong.`;
|
|
||||||
|
|
||||||
const headers = { 'Content-Type': 'application/json' };
|
|
||||||
if (key) headers['Authorization'] = 'Bearer ' + key;
|
|
||||||
|
|
||||||
const resp = await fetch(url + '/chat/completions', {
|
|
||||||
method: 'POST',
|
|
||||||
headers,
|
|
||||||
body: JSON.stringify({
|
|
||||||
model,
|
|
||||||
max_tokens: 2000,
|
|
||||||
messages: [{ role: 'user', content: prompt }]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
if (!resp.ok) throw new Error('LLM error: ' + resp.status + ' ' + await resp.text());
|
|
||||||
const data = await resp.json();
|
|
||||||
const raw = data.choices?.[0]?.message?.content || '';
|
|
||||||
const clean = raw.replace(/```json|```/g, '').trim();
|
|
||||||
return JSON.parse(clean);
|
|
||||||
}
|
|
||||||
|
|
||||||
function scorePill(score, max) {
|
|
||||||
const pct = score / max;
|
|
||||||
const cls = pct >= 0.8 ? 'ok' : pct >= 0.5 ? 'mid' : 'low';
|
|
||||||
return `<span class="score-pill ${cls}">${score} / ${max}</span>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderResults(data, keys) {
|
|
||||||
document.getElementById('result-section').style.display = '';
|
|
||||||
document.getElementById('transcript-box').textContent = data.transcript_clean || '(не удалось извлечь)';
|
|
||||||
|
|
||||||
// Show parsed answers
|
|
||||||
const sa = data.student_answers || {};
|
|
||||||
let parsedText = '';
|
|
||||||
if (sa.b1) parsedText += 'Задание 1: ' + Object.entries(sa.b1).map(([k,v]) => `${k}=${v}`).join(' ') + '\n';
|
|
||||||
if (sa.b2) parsedText += 'Задания 2-9: ' + Object.entries(sa.b2).map(([k,v]) => `${k}=${v}`).join(' ') + '\n';
|
|
||||||
if (sa.c1) parsedText += 'Задания 10-18: ' + Object.entries(sa.c1).map(([k,v]) => `${k}=${v}`).join(' ');
|
|
||||||
document.getElementById('parsed-answers-box').textContent = parsedText;
|
|
||||||
|
|
||||||
// B1 table
|
|
||||||
const b1res = data.results?.b1 || {};
|
|
||||||
const b1body = document.getElementById('table-b1');
|
|
||||||
b1body.innerHTML = '';
|
|
||||||
['A','B','C','D','E','F'].filter(l => keys.b1[l]).forEach(l => {
|
|
||||||
const ok = b1res[l];
|
|
||||||
const studentAns = sa.b1?.[l] ?? '?';
|
|
||||||
b1body.innerHTML += `<tr>
|
|
||||||
<td>${l}</td>
|
|
||||||
<td>${studentAns}</td>
|
|
||||||
<td>${keys.b1[l]}</td>
|
|
||||||
<td class="${ok ? 'mark-ok' : 'mark-err'}">${ok ? '✓' : '✗'}</td>
|
|
||||||
</tr>`;
|
|
||||||
});
|
|
||||||
const b1max = Object.keys(keys.b1).length;
|
|
||||||
document.getElementById('score-b1-pill').outerHTML = scorePill(data.scores?.b1 ?? 0, b1max);
|
|
||||||
|
|
||||||
// B2 table
|
|
||||||
const b2res = data.results?.b2 || {};
|
|
||||||
const b2body = document.getElementById('table-b2');
|
|
||||||
b2body.innerHTML = '';
|
|
||||||
for (let i = 2; i <= 9; i++) {
|
|
||||||
if (!keys.b2[i]) continue;
|
|
||||||
const ok = b2res[i];
|
|
||||||
const studentAns = sa.b2?.[i] ?? '?';
|
|
||||||
const labels = { '1': 'True', '2': 'False', '3': 'Not Stated' };
|
|
||||||
b2body.innerHTML += `<tr>
|
|
||||||
<td>${i}</td>
|
|
||||||
<td>${studentAns} ${labels[studentAns] ? `<span style="color:var(--muted);font-size:11px">(${labels[studentAns]})</span>` : ''}</td>
|
|
||||||
<td>${keys.b2[i]} <span style="color:var(--muted);font-size:11px">(${labels[keys.b2[i]] || ''})</span></td>
|
|
||||||
<td class="${ok ? 'mark-ok' : 'mark-err'}">${ok ? '✓' : '✗'}</td>
|
|
||||||
</tr>`;
|
|
||||||
}
|
|
||||||
const b2max = Object.keys(keys.b2).length;
|
|
||||||
document.getElementById('score-b2-pill').outerHTML = scorePill(data.scores?.b2 ?? 0, b2max);
|
|
||||||
|
|
||||||
// C1 table
|
|
||||||
const c1res = data.results?.c1 || {};
|
|
||||||
const c1body = document.getElementById('table-c1');
|
|
||||||
c1body.innerHTML = '';
|
|
||||||
for (let i = 10; i <= 18; i++) {
|
|
||||||
if (!keys.c1[i]) continue;
|
|
||||||
const ok = c1res[i];
|
|
||||||
const studentAns = sa.c1?.[i] ?? '?';
|
|
||||||
c1body.innerHTML += `<tr>
|
|
||||||
<td>${i}</td>
|
|
||||||
<td>${studentAns}</td>
|
|
||||||
<td>${keys.c1[i]}</td>
|
|
||||||
<td class="${ok ? 'mark-ok' : 'mark-err'}">${ok ? '✓' : '✗'}</td>
|
|
||||||
</tr>`;
|
|
||||||
}
|
|
||||||
const c1max = Object.keys(keys.c1).length;
|
|
||||||
document.getElementById('score-c1-pill').outerHTML = scorePill(data.scores?.c1 ?? 0, c1max);
|
|
||||||
|
|
||||||
// Total
|
|
||||||
const total = data.scores?.total ?? 0;
|
|
||||||
const maxTotal = b1max + b2max + c1max;
|
|
||||||
const totalEl = document.getElementById('total-score');
|
|
||||||
totalEl.textContent = total;
|
|
||||||
totalEl.style.color = total / maxTotal >= 0.8 ? 'var(--ok)' : total / maxTotal >= 0.5 ? 'var(--warn)' : 'var(--err)';
|
|
||||||
document.getElementById('total-label').textContent = `из ${maxTotal} первичных баллов`;
|
|
||||||
|
|
||||||
// Errors
|
|
||||||
const errList = document.getElementById('errors-summary');
|
|
||||||
if (data.errors?.length) {
|
|
||||||
errList.innerHTML = data.errors.map(e => `<div class="error-item">✗ ${e}</div>`).join('');
|
|
||||||
} else {
|
|
||||||
errList.innerHTML = '<span style="color:var(--ok)">Ошибок нет!</span>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function runCheck() {
|
|
||||||
if (!audioFile) return;
|
|
||||||
const keys = getKeys();
|
|
||||||
const btn = document.getElementById('run-btn');
|
|
||||||
btn.disabled = true;
|
|
||||||
btn.innerHTML = '<span class="spinner"></span>Обработка...';
|
|
||||||
document.getElementById('log-section').style.display = '';
|
|
||||||
document.getElementById('log').innerHTML = '';
|
|
||||||
document.getElementById('result-section').style.display = 'none';
|
|
||||||
|
|
||||||
try {
|
|
||||||
log('→ Отправляю аудио в Whisper...', 'info');
|
|
||||||
const transcript = await transcribeAudio(audioFile);
|
|
||||||
log('✓ Транскрипция получена: ' + transcript.substring(0, 80) + '...', 'ok');
|
|
||||||
|
|
||||||
log('→ Отправляю в LLM для разбора ответов и проверки...', 'info');
|
|
||||||
const result = await parseAnswersWithLLM(transcript, keys);
|
|
||||||
log('✓ Проверка завершена. Итог: ' + result.scores?.total + ' баллов', 'ok');
|
|
||||||
|
|
||||||
renderResults(result, keys);
|
|
||||||
} catch(e) {
|
|
||||||
log('✗ Ошибка: ' + e.message, 'err');
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.disabled = false;
|
|
||||||
btn.innerHTML = 'Распознать и проверить →';
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetAll() {
|
|
||||||
audioFile = null;
|
|
||||||
document.getElementById('audio-info').style.display = 'none';
|
|
||||||
document.getElementById('audio-file').value = '';
|
|
||||||
document.getElementById('run-btn').disabled = true;
|
|
||||||
document.getElementById('result-section').style.display = 'none';
|
|
||||||
document.getElementById('log-section').style.display = 'none';
|
|
||||||
document.getElementById('log').innerHTML = '';
|
|
||||||
document.getElementById('step1-num').classList.remove('done');
|
|
||||||
document.getElementById('step2-num').classList.add('pending');
|
|
||||||
}
|
|
||||||
|
|
||||||
buildKeyRows();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,300 +0,0 @@
|
||||||
|
|
||||||
<style>
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
body { font-family: var(--font-sans); }
|
|
||||||
.wrap { padding: 1rem 0; }
|
|
||||||
.section { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 12px; }
|
|
||||||
.label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
|
|
||||||
.row { display: flex; gap: 8px; align-items: center; }
|
|
||||||
input[type=text], input[type=password] { flex: 1; font-size: 13px; }
|
|
||||||
.drop-zone { border: 1px dashed var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 2rem; text-align: center; cursor: pointer; color: var(--color-text-secondary); font-size: 13px; transition: background 0.15s; position: relative; }
|
|
||||||
.drop-zone:hover { background: var(--color-background-secondary); }
|
|
||||||
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
|
|
||||||
.preview-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
|
|
||||||
.preview-img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-tertiary); }
|
|
||||||
.tab-row { display: flex; gap: 4px; margin-bottom: 12px; }
|
|
||||||
.tab { padding: 6px 14px; font-size: 13px; border-radius: var(--border-radius-md); cursor: pointer; border: 0.5px solid var(--color-border-tertiary); background: transparent; color: var(--color-text-secondary); }
|
|
||||||
.tab.active { background: var(--color-background-secondary); color: var(--color-text-primary); border-color: var(--color-border-secondary); }
|
|
||||||
.result-box { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem; font-size: 13px; line-height: 1.7; color: var(--color-text-primary); white-space: pre-wrap; min-height: 80px; max-height: 420px; overflow-y: auto; }
|
|
||||||
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: var(--border-radius-md); }
|
|
||||||
.badge-ok { background: var(--color-background-success); color: var(--color-text-success); }
|
|
||||||
.badge-err { background: var(--color-background-danger); color: var(--color-text-danger); }
|
|
||||||
.badge-wait { background: var(--color-background-warning); color: var(--color-text-warning); }
|
|
||||||
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--color-border-secondary); border-top-color: var(--color-text-secondary); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
.score-table { width: 100%; font-size: 13px; border-collapse: collapse; }
|
|
||||||
.score-table td, .score-table th { padding: 4px 8px; border-bottom: 0.5px solid var(--color-border-tertiary); text-align: left; }
|
|
||||||
.score-table th { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; }
|
|
||||||
.total-row td { font-weight: 500; border-top: 1px solid var(--color-border-secondary); }
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="wrap">
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<div class="label">Эндпоинт и модель</div>
|
|
||||||
<div class="row" style="margin-bottom:8px">
|
|
||||||
<input type="text" id="endpoint" value="https://llm.lambda.coredump.ru/v1" placeholder="https://...">
|
|
||||||
</div>
|
|
||||||
<div class="row" style="margin-bottom:8px">
|
|
||||||
<input type="text" id="model" value="openai/Qwen3.5-122B-A10B" placeholder="имя модели">
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<input type="password" id="apikey" placeholder="API key">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<div class="label">Режим</div>
|
|
||||||
<div class="tab-row">
|
|
||||||
<button class="tab active" onclick="setMode('ocr',this)">OCR рукописи</button>
|
|
||||||
<button class="tab" onclick="setMode('grade',this)">Проверка сочинения</button>
|
|
||||||
<button class="tab" onclick="setMode('full',this)">Полный цикл</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="pane-ocr">
|
|
||||||
<div class="label">Загрузи фото бланка (можно несколько)</div>
|
|
||||||
<div class="drop-zone" id="drop">
|
|
||||||
Нажми или перетащи изображения сюда
|
|
||||||
<input type="file" id="file-input" accept="image/*" multiple onchange="handleFiles(this.files)">
|
|
||||||
</div>
|
|
||||||
<div class="preview-grid" id="previews"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="pane-grade" style="display:none">
|
|
||||||
<div class="label">Текст сочинения</div>
|
|
||||||
<textarea id="essay-text" style="width:100%;height:160px;font-size:13px;padding:8px;border-radius:var(--border-radius-md);border:0.5px solid var(--color-border-tertiary);background:var(--color-background-primary);color:var(--color-text-primary);resize:vertical" placeholder="Вставьте текст сочинения..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="pane-full" style="display:none">
|
|
||||||
<div class="label">Загрузи фото + автоматически распознаёт и проверит по критериям</div>
|
|
||||||
<div class="drop-zone">
|
|
||||||
Нажми или перетащи изображения сюда
|
|
||||||
<input type="file" id="file-input-full" accept="image/*" multiple onchange="handleFilesFull(this.files)">
|
|
||||||
</div>
|
|
||||||
<div class="preview-grid" id="previews-full"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-bottom:12px">
|
|
||||||
<button onclick="run()" style="width:100%;padding:10px;font-size:14px">Запустить ↗</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" id="status-section" style="display:none">
|
|
||||||
<div class="row" style="justify-content:space-between;margin-bottom:8px">
|
|
||||||
<span style="font-size:13px;font-weight:500">Результат</span>
|
|
||||||
<span id="status-badge" class="badge badge-wait">ожидание</span>
|
|
||||||
</div>
|
|
||||||
<div id="result-content"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let mode = 'ocr';
|
|
||||||
let images = [];
|
|
||||||
let imagesFull = [];
|
|
||||||
|
|
||||||
function setMode(m, el) {
|
|
||||||
mode = m;
|
|
||||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
||||||
el.classList.add('active');
|
|
||||||
document.getElementById('pane-ocr').style.display = m === 'ocr' ? '' : 'none';
|
|
||||||
document.getElementById('pane-grade').style.display = m === 'grade' ? '' : 'none';
|
|
||||||
document.getElementById('pane-full').style.display = m === 'full' ? '' : 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFiles(files) {
|
|
||||||
images = [];
|
|
||||||
const grid = document.getElementById('previews');
|
|
||||||
grid.innerHTML = '';
|
|
||||||
Array.from(files).forEach(f => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = e => {
|
|
||||||
images.push({data: e.target.result.split(',')[1], type: f.type});
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.src = e.target.result;
|
|
||||||
img.className = 'preview-img';
|
|
||||||
grid.appendChild(img);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(f);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFilesFull(files) {
|
|
||||||
imagesFull = [];
|
|
||||||
const grid = document.getElementById('previews-full');
|
|
||||||
grid.innerHTML = '';
|
|
||||||
Array.from(files).forEach(f => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = e => {
|
|
||||||
imagesFull.push({data: e.target.result.split(',')[1], type: f.type});
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.src = e.target.result;
|
|
||||||
img.className = 'preview-img';
|
|
||||||
grid.appendChild(img);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(f);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showStatus(text, type) {
|
|
||||||
const s = document.getElementById('status-section');
|
|
||||||
s.style.display = '';
|
|
||||||
const badge = document.getElementById('status-badge');
|
|
||||||
badge.className = 'badge badge-' + type;
|
|
||||||
badge.textContent = type === 'wait' ? 'загрузка...' : type === 'ok' ? 'готово' : 'ошибка';
|
|
||||||
document.getElementById('result-content').innerHTML = text;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function callAPI(messages, maxTokens) {
|
|
||||||
const endpoint = document.getElementById('endpoint').value.replace(/\/$/, '');
|
|
||||||
const model = document.getElementById('model').value;
|
|
||||||
const apikey = document.getElementById('apikey').value;
|
|
||||||
const headers = {'Content-Type': 'application/json'};
|
|
||||||
if (apikey) headers['Authorization'] = 'Bearer ' + apikey;
|
|
||||||
|
|
||||||
const resp = await fetch(endpoint + '/chat/completions', {
|
|
||||||
method: 'POST',
|
|
||||||
headers,
|
|
||||||
body: JSON.stringify({model, max_tokens: maxTokens || 2000, messages})
|
|
||||||
});
|
|
||||||
if (!resp.ok) throw new Error('HTTP ' + resp.status + ': ' + await resp.text());
|
|
||||||
const data = await resp.json();
|
|
||||||
return data.choices?.[0]?.message?.content || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildImageContent(imgList, textPrompt) {
|
|
||||||
const content = [];
|
|
||||||
imgList.forEach(img => {
|
|
||||||
content.push({type: 'image_url', image_url: {url: `data:${img.type};base64,${img.data}`}});
|
|
||||||
});
|
|
||||||
content.push({type: 'text', text: textPrompt});
|
|
||||||
return content;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CRITERIA = `К1 (0-1): Формулировка проблемы
|
|
||||||
К2 (0-6): Комментарий (2 примера + связь)
|
|
||||||
К3 (0-1): Позиция автора
|
|
||||||
К4 (0-1): Отношение к позиции автора
|
|
||||||
К5 (0-2): Смысловая цельность и связность
|
|
||||||
К6 (0-2): Точность и выразительность речи
|
|
||||||
К7 (0-3): Орфография (3=0ош, 2=1ош, 1=2-3ош, 0=4+)
|
|
||||||
К8 (0-3): Пунктуация (3=0ош, 2=1-2ош, 1=3-4ош, 0=5+)
|
|
||||||
К9 (0-2): Языковые нормы (грамматика)
|
|
||||||
К10 (0-2): Речевые нормы
|
|
||||||
К11 (0-1): Этические нормы
|
|
||||||
К12 (0-1): Фактическая точность
|
|
||||||
Итого: 25 баллов
|
|
||||||
Правила: если К1=0 → К2,К3,К4 автоматически=0. К6 не может быть выше К10.`;
|
|
||||||
|
|
||||||
async function run() {
|
|
||||||
showStatus('<span class="spinner"></span>Отправляю запрос...', 'wait');
|
|
||||||
try {
|
|
||||||
if (mode === 'ocr') {
|
|
||||||
if (images.length === 0) throw new Error('Загрузи хотя бы одно изображение');
|
|
||||||
const content = buildImageContent(images,
|
|
||||||
'Ты эксперт по распознаванию рукописного текста. Внимательно прочитай рукописное сочинение ЕГЭ на изображении и выведи его текст максимально точно. Сохраняй абзацное деление. Зачёркнутые слова отмечай в скобках [зачёркнуто]. Не добавляй никаких комментариев — только текст.');
|
|
||||||
const text = await callAPI([{role:'user', content}], 2000);
|
|
||||||
showStatus(`<div class="result-box">${escHtml(text)}</div>`, 'ok');
|
|
||||||
|
|
||||||
} else if (mode === 'grade') {
|
|
||||||
const essay = document.getElementById('essay-text').value.trim();
|
|
||||||
if (!essay) throw new Error('Вставьте текст сочинения');
|
|
||||||
const prompt = `Ты эксперт-проверяющий ЕГЭ по русскому языку. Проверь сочинение по критериям ФИПИ и выставь баллы.
|
|
||||||
|
|
||||||
КРИТЕРИИ:
|
|
||||||
${CRITERIA}
|
|
||||||
|
|
||||||
СОЧИНЕНИЕ:
|
|
||||||
${essay}
|
|
||||||
|
|
||||||
Ответь строго в формате JSON без markdown-обёрток:
|
|
||||||
{"k1":0,"k2":0,"k3":0,"k4":0,"k5":0,"k6":0,"k7":0,"k8":0,"k9":0,"k10":0,"k11":0,"k12":0,"total":0,"comments":{"k1":"...","k2":"...","k3":"...","k4":"...","k5":"...","k6":"...","k7":"...","k8":"...","k9":"...","k10":"...","k11":"...","k12":"..."},"recommendations":["...","..."]}`;
|
|
||||||
|
|
||||||
const raw = await callAPI([{role:'user',content:prompt}], 2000);
|
|
||||||
renderGrading(raw);
|
|
||||||
|
|
||||||
} else if (mode === 'full') {
|
|
||||||
if (imagesFull.length === 0) throw new Error('Загрузи хотя бы одно изображение');
|
|
||||||
|
|
||||||
showStatus('<span class="spinner"></span>Шаг 1/2: распознаю рукопись...', 'wait');
|
|
||||||
const content = buildImageContent(imagesFull,
|
|
||||||
'Ты эксперт по распознаванию рукописного текста. Внимательно прочитай рукописное сочинение ЕГЭ на изображении и выведи его текст максимально точно. Сохраняй абзацное деление. Не добавляй никаких комментариев — только текст сочинения.');
|
|
||||||
const essayText = await callAPI([{role:'user', content}], 2000);
|
|
||||||
|
|
||||||
showStatus('<span class="spinner"></span>Шаг 2/2: проверяю по критериям...', 'wait');
|
|
||||||
const prompt = `Ты эксперт-проверяющий ЕГЭ по русскому языку. Проверь сочинение по критериям ФИПИ и выставь баллы.
|
|
||||||
|
|
||||||
КРИТЕРИИ:
|
|
||||||
${CRITERIA}
|
|
||||||
|
|
||||||
СОЧИНЕНИЕ:
|
|
||||||
${essayText}
|
|
||||||
|
|
||||||
Ответь строго в формате JSON без markdown-обёрток:
|
|
||||||
{"recognized_text":"...","k1":0,"k2":0,"k3":0,"k4":0,"k5":0,"k6":0,"k7":0,"k8":0,"k9":0,"k10":0,"k11":0,"k12":0,"total":0,"comments":{"k1":"...","k2":"...","k3":"...","k4":"...","k5":"...","k6":"...","k7":"...","k8":"...","k9":"...","k10":"...","k11":"...","k12":"..."},"recommendations":["...","..."]}`;
|
|
||||||
const raw = await callAPI([{role:'user',content:prompt}], 3000);
|
|
||||||
renderGrading(raw, essayText);
|
|
||||||
}
|
|
||||||
} catch(e) {
|
|
||||||
showStatus(`<div style="font-size:13px;color:var(--color-text-danger)">${escHtml(e.message)}</div>`, 'err');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderGrading(raw, ocrText) {
|
|
||||||
let data;
|
|
||||||
try {
|
|
||||||
const clean = raw.replace(/```json|```/g, '').trim();
|
|
||||||
data = JSON.parse(clean);
|
|
||||||
} catch(e) {
|
|
||||||
showStatus(`<div class="result-box">${escHtml(raw)}</div>`, 'ok');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const keys = ['k1','k2','k3','k4','k5','k6','k7','k8','k9','k10','k11','k12'];
|
|
||||||
const names = {k1:'Формулировка проблемы',k2:'Комментарий',k3:'Позиция автора',k4:'Отношение к позиции',k5:'Связность',k6:'Точность речи',k7:'Орфография',k8:'Пунктуация',k9:'Языковые нормы',k10:'Речевые нормы',k11:'Этика',k12:'Фактика'};
|
|
||||||
const maxes = {k1:1,k2:6,k3:1,k4:1,k5:2,k6:2,k7:3,k8:3,k9:2,k10:2,k11:1,k12:1};
|
|
||||||
|
|
||||||
let rows = keys.map(k => {
|
|
||||||
const score = data[k] ?? '?';
|
|
||||||
const max = maxes[k];
|
|
||||||
const pct = typeof score === 'number' ? score/max : 0;
|
|
||||||
const color = pct === 1 ? 'var(--color-text-success)' : pct >= 0.5 ? 'var(--color-text-warning)' : 'var(--color-text-danger)';
|
|
||||||
return `<tr><td style="color:var(--color-text-secondary)">${k.toUpperCase()}</td><td>${names[k]}</td><td style="text-align:right;font-weight:500;color:${color}">${score}/${max}</td></tr>`;
|
|
||||||
}).join('');
|
|
||||||
|
|
||||||
const total = data.total ?? keys.reduce((s,k) => s + (data[k]||0), 0);
|
|
||||||
const totalColor = total >= 20 ? 'var(--color-text-success)' : total >= 13 ? 'var(--color-text-warning)' : 'var(--color-text-danger)';
|
|
||||||
|
|
||||||
let comments = '';
|
|
||||||
if (data.comments) {
|
|
||||||
comments = keys.map(k => data.comments[k] ? `<div style="margin-bottom:10px"><span style="font-size:12px;font-weight:500;color:var(--color-text-secondary)">${k.toUpperCase()} — </span><span style="font-size:13px">${escHtml(data.comments[k])}</span></div>` : '').join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
let recs = '';
|
|
||||||
if (data.recommendations?.length) {
|
|
||||||
recs = data.recommendations.map((r,i) => `<div style="font-size:13px;margin-bottom:6px">${i+1}. ${escHtml(r)}</div>`).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
let ocrBlock = '';
|
|
||||||
if (ocrText || data.recognized_text) {
|
|
||||||
const t = data.recognized_text || ocrText;
|
|
||||||
ocrBlock = `<div style="margin-bottom:12px"><div class="label" style="margin-bottom:4px">Распознанный текст</div><div class="result-box" style="max-height:160px">${escHtml(t)}</div></div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
showStatus(`
|
|
||||||
${ocrBlock}
|
|
||||||
<table class="score-table">
|
|
||||||
<thead><tr><th>Кр.</th><th>Название</th><th style="text-align:right">Балл</th></tr></thead>
|
|
||||||
<tbody>${rows}</tbody>
|
|
||||||
<tfoot><tr class="total-row"><td colspan="2">Итого</td><td style="text-align:right;color:${totalColor}">${total}/25</td></tr></tfoot>
|
|
||||||
</table>
|
|
||||||
${comments ? `<div style="margin-top:14px"><div class="label" style="margin-bottom:8px">Комментарии</div>${comments}</div>` : ''}
|
|
||||||
${recs ? `<div style="margin-top:12px"><div class="label" style="margin-bottom:8px">Рекомендации</div>${recs}</div>` : ''}
|
|
||||||
`, 'ok');
|
|
||||||
}
|
|
||||||
|
|
||||||
function escHtml(s) {
|
|
||||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br>');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue