Spaces:
Running
Running
File size: 3,682 Bytes
79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 6ffdbaf 120f536 6ffdbaf 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 |
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>会話表示画面</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
max-width: 800px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h2 {
margin-bottom: 20px;
}
#transcription {
white-space: pre-wrap;
padding: 10px;
background-color: #e9e9e9;
border-radius: 4px;
margin-bottom: 20px;
max-height: 400px;
overflow-y: auto;
}
button {
margin: 5px;
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.history-button {
margin: 5px;
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
history-button:hover {
background-color: #0056b3;
}
button:hover {
background-color: #0056b3;
}
.flex {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<h2>会話の文字起こし表示</h2>
<div id="transcription">ここに会話内容が表示されます。</div>
<div class="flex">
<form method="POST" action="/index">
<div class="feedback-space">
<input
class="history-button"
id="indexButton"
type="submit"
name="submit"
value="録音画面を表示"
/>
</div>
</form>
<form method="POST" action="/feedback">
<div class="feedback-space">
<input
class="history-button"
id="feedbackButton"
type="submit"
name="submit"
value="フィードバック画面を表示"
/>
</div>
</form>
</div>
</div>
<script>
// 会話データを表示
async function displayTranscription() {
const transcriptionElement = document.getElementById("transcription");
try {
// バックエンドからデータを取得（デモ用のURLを指定）
const response = await fetch("/api/transcription");
if (!response.ok) throw new Error("データ取得に失敗しました。");
const data = await response.json();
// 会話内容を整形して表示
const formattedText = data.conversations
.map((conv, index) => `【${conv.speaker}】 ${conv.text}`)
.join("\n");
transcriptionElement.textContent = formattedText;
} catch (error) {
transcriptionElement.textContent = `エラー: ${error.message}`;
console.error("データ取得エラー:", error);
}
}
// 録音画面に戻る
function showRecorder() {
window.location.href = "index.html";
}
// フィードバック画面に移動
function showHistory() {
window.location.href = "feedback.html";
}
// 初期化処理
displayTranscription();
</script>
</body>
</html>
|