Spaces:
Running
Running
File size: 3,982 Bytes
79dfd5a 120f536 e501bac 79dfd5a 120f536 e501bac 120f536 e501bac 120f536 79dfd5a 120f536 79dfd5a 120f536 e501bac 6ffdbaf 120f536 6ffdbaf 120f536 e501bac 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 79dfd5a 120f536 e501bac 1671440 e501bac 1671440 e501bac 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 138 139 140 141 |
<!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-top: 20px;
margin-left: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
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">
<button class="history-button" id="detailButton" onclick="showRecorder()">録音画面を表示</button>
<button class="history-button" id="detailButton" onclick="showFeedback()">フィードバック画面を表示</button>
<!--
<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);
}
}
// 初期化処理
displayTranscription();
//画面遷移
function showRecorder() {
// 録音画面へ遷移
window.location.href = '/index';
}
function showFeedback() {
// フィードバック画面へ遷移
window.location.href = '/feedback';
}
</script>
</body>
</html>
|