chore: エラーメッセージを表示

app.py

@@ -29,10 +29,10 @@ def process_jsonl_file(jsonl_file_path: str, api_key: str):
         ) as temp_file:
             temp_file.write(html_content)
             output_file = temp_file.name
-        return output_file
+        return output_file, ""
 
     except Exception as e:
-        return f"エラーが発生しました: {str(e)}"
+        return None, e
 
 
 # Gradioデモ
@@ -40,14 +40,15 @@ with gr.Blocks() as demo:
     gr.Markdown("## ELYZA-tasks-100(-TV) セルフ評価ページ")
 
     jsonl_input = gr.File(label="JSONLファイルをアップロード")
-    api_key_input = gr.Textbox(label="APIキーを入力", type="password")
-    gr.Markdown("GeminiのAPIキーの発行は[こちら](https://aistudio.google.com/app/apikey)")
-    process_button = gr.Button("実行")
+    api_key_input = gr.Textbox(label="GeminiのAPIキー（スコアのセルフ評価を行う場合）", type="password")
+    gr.Markdown("APIキーの発行は[こちら](https://aistudio.google.com/app/apikey)")
+    process_button = gr.Button("レポートを作成")
 
     output_file = gr.File(label="セルフ評価レポート")
+    output_text = gr.Textbox(label="システムメッセージ")
 
     process_button.click(
-        process_jsonl_file, inputs=[jsonl_input, api_key_input], outputs=output_file
+        process_jsonl_file, inputs=[jsonl_input, api_key_input], outputs=[output_file, output_text]
     )
 
 demo.launch()

utils.py

@@ -121,7 +121,7 @@ def report(tasks: list[dict]) -> str:
             height: 1px;
             background-color: #ddd;
         }
-        .divider .taskId {
+        .divider .taskName {
             position: absolute;
             margin: -8px;
             left: 50%;
@@ -155,20 +155,20 @@ def report(tasks: list[dict]) -> str:
         + json.dumps(tasks)
         + """;
 
-        // taskId: number
-        const createDivider = (taskId) => {
+        // taskName: str
+        const createDivider = (taskName) => {
             const divider = document.createElement('div');
             divider.classList.add('divider');
 
             const line = document.createElement('div');
             line.classList.add('line');
 
-            const taskIdLabel = document.createElement('div');
-            taskIdLabel.classList.add('taskId');
-            taskIdLabel.textContent = `Task ${taskId}`;
+            const taskNameLabel = document.createElement('div');
+            taskNameLabel.classList.add('taskName');
+            taskNameLabel.textContent = taskName;
 
             divider.appendChild(line);
-            divider.appendChild(taskIdLabel);
+            divider.appendChild(taskNameLabel);
 
             return divider;
         };
@@ -195,11 +195,11 @@ def report(tasks: list[dict]) -> str:
 
         const container = document.getElementById('container');
 
-        messages.forEach((message) => {
+        messages.forEach((message, i) => {
             const task = document.createElement('div');
             task.classList.add('task');
 
-            task.appendChild(createDivider(message.task_id));
+            task.appendChild(createDivider(message.task_id ? "Task ID: " + message.task_id : "Task Index" + i));
             task.appendChild(createMessage(message.input, 'input'));
             task.appendChild(createMessage(message.output, 'output'));