Spaces:
Runtime error
Runtime error
File size: 4,395 Bytes
828cc8a |
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 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>会話詳細画面</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<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>
|