Upload app.py

app.py

@@ -103,16 +103,93 @@ def transcribe_handwriting(image):
     return output_text[0] if output_text else "文字を認識できませんでした。"
 
 
-# シンプルなgr.Interfaceを使用
-demo = gr.Interface(
-    fn=transcribe_handwriting,
-    inputs=gr.Image(type="pil", label="手書き文字の画像をアップロード"),
-    outputs=gr.Textbox(label="認識結果", lines=10),
-    title="手書き文字認識システム",
-    description="**Qwen3-VL-4B-Instruct** を使用した手書き文字のOCR（光学文字認識）システムです。日本語とアルファベットの両方に対応しています。",
-    article="### 使い方\nスキャンした手書きメモや写真をアップロードしてください。認識精度は文字の明瞭さに依存します。",
-    allow_flagging="never",
-)
+def process_sketch(image_dict):
+    """ImageEditorからの入力を処理"""
+    if image_dict is None:
+        return "手書きしてください。"
+
+    # gr.ImageEditorの出力は辞書形式: {"background": ..., "layers": [...], "composite": ...}
+    if isinstance(image_dict, dict):
+        image = image_dict.get("composite")
+        if image is None:
+            image = image_dict.get("background")
+    else:
+        image = image_dict
+
+    if image is None:
+        return "手書きしてください。"
+
+    return transcribe_handwriting(image)
+
+
+# Gradioインターフェースの構築
+with gr.Blocks(title="手書き文字認識システム") as demo:
+    gr.Markdown(
+        """
+        # 手書き文字認識システム
+
+        **Qwen3-VL-4B-Instruct** を使用した手書き文字のOCR（光学文字認識）システムです。
+        日本語とアルファベットの両方に対応しています。
+        """
+    )
+
+    with gr.Tab("画像アップロード"):
+        gr.Markdown("手書き文字が書かれた画像をアップロードしてください。")
+        with gr.Row():
+            with gr.Column():
+                upload_image = gr.Image(
+                    label="画像をアップロード",
+                    type="pil",
+                    height=400,
+                )
+                upload_btn = gr.Button("文字を認識", variant="primary")
+            with gr.Column():
+                upload_output = gr.Textbox(
+                    label="認識結果",
+                    lines=10,
+                )
+
+        upload_btn.click(
+            fn=transcribe_handwriting,
+            inputs=upload_image,
+            outputs=upload_output,
+        )
+
+    with gr.Tab("手書き入力"):
+        gr.Markdown("マウスやタッチで文字を書いてください。")
+        with gr.Row():
+            with gr.Column():
+                sketch_input = gr.ImageEditor(
+                    label="手書きエリア",
+                    sources=(),
+                    brush=gr.Brush(colors=["#000000"], color_mode="fixed"),
+                    canvas_size=(600, 400),
+                    type="pil",
+                )
+                sketch_btn = gr.Button("文字を認識", variant="primary")
+            with gr.Column():
+                sketch_output = gr.Textbox(
+                    label="認識結果",
+                    lines=10,
+                )
+
+        sketch_btn.click(
+            fn=process_sketch,
+            inputs=sketch_input,
+            outputs=sketch_output,
+        )
+
+    gr.Markdown(
+        """
+        ---
+        ### 使い方のヒント
+        - **画像アップロード**: スキャンした手書きメモや写真をアップロード
+        - **手書き入力**: マウスで直接文字を書いて認識をテスト
+        - 認識精度は文字の明瞭さに依存します
+
+        *Powered by Qwen3-VL-4B-Instruct*
+        """
+    )
 
 if __name__ == "__main__":
     demo.launch()