Hugging Face's logo

Spaces:
Justtalk
/
JusTalk
Running

App Files Community
3
mizzzuno commited on
Commit
3a495d9
·
verified ·
1 Parent(s): 795058e

use tailwind css

Browse files
Files changed (1) hide show
  1. templates/talkDetail.html +68 -156
templates/talkDetail.html CHANGED
@@ -1,156 +1,68 @@
1
- <!DOCTYPE html>
2
- <html lang="ja">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>会話詳細画面</title>
7
- <link
8
- href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9
- rel="stylesheet"
10
- />
11
- <style>
12
- body {
13
- font-family: Arial, sans-serif;
14
- margin: 0;
15
- padding: 20px;
16
- background-color: #f4f4f4;
17
- height: 100vh;
18
- display: flex;
19
- justify-content: center;
20
- align-items: center;
21
- }
22
- .container {
23
- max-width: 800px;
24
- background-color: #fff;
25
- padding: 20px;
26
- border-radius: 8px;
27
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
- }
29
- h2 {
30
- margin-bottom: 20px;
31
- }
32
- #transcription {
33
- white-space: pre-wrap;
34
- padding: 10px;
35
- background-color: #e9e9e9;
36
- border-radius: 4px;
37
- margin-bottom: 20px;
38
- max-height: 400px;
39
- overflow-y: auto;
40
- }
41
- button {
42
- margin: 5px;
43
- padding: 10px 20px;
44
- border: none;
45
- border-radius: 4px;
46
- background-color: #007bff;
47
- color: #fff;
48
- cursor: pointer;
49
- }
50
- .history-button {
51
- margin-top: 20px;
52
- margin-left: 20px;
53
- padding: 10px 20px;
54
- background-color: #007bff;
55
- color: white;
56
- border: none;
57
- border-radius: 5px;
58
- cursor: pointer;
59
- }
60
- history-button:hover {
61
- background-color: #0056b3;
62
- }
63
- button:hover {
64
- background-color: #0056b3;
65
- }
66
- .flex {
67
- display: flex;
68
- justify-content: center;
69
- }
70
- </style>
71
- </head>
72
- <body>
73
- <div class="container">
74
- <h2>会話の文字起こし表示</h2>
75
- <div id="transcription">ここに会話内容が表示されます。</div>
76
- <div class="flex">
77
- <button
78
- class="history-button"
79
- id="detailButton"
80
- onclick="showRecorder()"
81
- >
82
- 録音画面を表示
83
- </button>
84
- <button
85
- class="history-button"
86
- id="detailButton"
87
- onclick="showFeedback()"
88
- >
89
- フィードバック画面を表示
90
- </button>
91
- <!--
92
- <form method="POST" action="/index">
93
- <div class="feedback-space">
94
- <input
95
- class="history-button"
96
- id="indexButton"
97
- type="submit"
98
- name="submit"
99
- value="録音画面を表示"
100
- />
101
- </div>
102
- </form>
103
-
104
- <form method="POST" action="/feedback">
105
- <div class="feedback-space">
106
- <input
107
- class="history-button"
108
- id="feedbackButton"
109
- type="submit"
110
- name="submit"
111
- value="フィードバック画面を表示"
112
- />
113
- </div>
114
- </form>-->
115
- </div>
116
- </div>
117
-
118
- <script>
119
- // 会話データを表示
120
- async function displayTranscription() {
121
- const transcriptionElement = document.getElementById("transcription");
122
-
123
- try {
124
- // バックエンドからデータを取得（デモ用のURLを指定）
125
- const response = await fetch("/api/transcription");
126
- if (!response.ok) throw new Error("データ取得に失敗しました。");
127
-
128
- const data = await response.json();
129
-
130
- // 会話内容を整形して表示
131
- const formattedText = data.conversations
132
- .map((conv, index) => `【${conv.speaker}】 ${conv.text}`)
133
- .join("\n");
134
-
135
- transcriptionElement.textContent = formattedText;
136
- } catch (error) {
137
- transcriptionElement.textContent = `エラー: ${error.message}`;
138
- console.error("データ取得エラー:", error);
139
- }
140
- }
141
-
142
- // 初期化処理
143
- displayTranscription();
144
-
145
- //画面遷移
146
- function showRecorder() {
147
- // 録音画面へ遷移
148
- window.location.href = "/index";
149
- }
150
- function showFeedback() {
151
- // フィードバック画面へ遷移
152
- window.location.href = "/feedback";
153
- }
154
- </script>
155
- </body>
156
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>会話詳細画面</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body
10
+ class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
11
+ >
12
+ <div
13
+ class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
14
+ >
15
+ <h2 class="text-2xl font-semibold mb-4">会話の文字起こし表示</h2>
16
+ <div
17
+ id="transcription"
18
+ class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
19
+ >
20
+ ここに会話内容が表示されます。
21
+ </div>
22
+ <div class="flex justify-center gap-4">
23
+ <button
24
+ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
25
+ onclick="showRecorder()"
26
+ >
27
+ 録音画面を表示
28
+ </button>
29
+ <button
30
+ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
31
+ onclick="showFeedback()"
32
+ >
33
+ フィードバック画面を表示
34
+ </button>
35
+ </div>
36
+ </div>
37
+ <script>
38
+ async function displayTranscription() {
39
+ const transcriptionElement = document.getElementById("transcription");
40
+
41
+ try {
42
+ const response = await fetch("/api/transcription");
43
+ if (!response.ok) throw new Error("データ取得に失敗しました。");
44
+
45
+ const data = await response.json();
46
+ const formattedText = data.conversations
47
+ .map((conv) => `【${conv.speaker}】 ${conv.text}`)
48
+ .join("\n");
49
+
50
+ transcriptionElement.textContent = formattedText;
51
+ } catch (error) {
52
+ transcriptionElement.textContent = `エラー: ${error.message}`;
53
+ console.error("データ取得エラー:", error);
54
+ }
55
+ }
56
+
57
+ displayTranscription();
58
+
59
+ function showRecorder() {
60
+ window.location.href = "/index";
61
+ }
62
+
63
+ function showFeedback() {
64
+ window.location.href = "/feedback";
65
+ }
66
+ </script>
67
+ </body>
68
+ </html>