refactor: Update file upload and URL extraction tabs for improved clarity and functionality

Makefile

@@ -165,12 +165,12 @@ pre-commit-run-ci: setup-lint
 # Run all tests
 test: venv
 	@echo "Running tests..."
-	$(VENV_PYTHON) -m pytest tests/ --durations=10 -v
+	$(VENV_PYTHON) -m pytest tests/ --durations=10
 
 # Run unit tests only
 test-unit: venv
 	@echo "Running unit tests..."
-	$(VENV_PYTHON) -m pytest tests/unit/ --durations=10 -v
+	$(VENV_PYTHON) -m pytest tests/unit/ --durations=10
 
 # Run E2E tests only
 test-e2e: venv

tests/e2e/features/file_upload.feature

@@ -6,18 +6,18 @@ Feature: File Upload Functionality
   Background:
     Given the application is running
 
-  Scenario: Uploading a PDF file with extraction button
+  Scenario: Uploading a PDF file in file upload tab
     Given the user has accessed the application page
-    When the user uploads a PDF file "sample_paper.pdf"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a PDF file "sample_paper.pdf"
     Then text should be extracted
     And the file input should be cleared
     And the "トーク原稿を生成" button should be active
 
-  Scenario: Uploading a text file with extraction button
+  Scenario: Uploading a text file in file upload tab
     Given the user has accessed the application page
-    When the user uploads a text file "sample_text.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a text file "sample_text.txt"
     Then text should be extracted
     And the file input should be cleared
     And the "トーク原稿を生成" button should be active
@@ -25,27 +25,28 @@ Feature: File Upload Functionality
   Scenario: File extraction appends to existing text with separator
     Given the user has accessed the application page
     And the user has entered "Existing content" into the extracted text area
-    When the user uploads a text file "sample_text.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a text file "sample_text.txt"
     Then text should be extracted with source separator
     And the extracted text area contains "Existing content"
     And the extracted text area contains source information for "sample_text.txt"
+    And the file input should be cleared
 
   Scenario: File extraction without automatic separator
     Given the user has accessed the application page
     And the user unchecks the "追加時に自動で区切りを挿入" checkbox
     And the user has entered "Existing content" into the extracted text area
-    When the user uploads a text file "sample_text.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a text file "sample_text.txt"
     Then text should be extracted without separator
     And the extracted text area contains "Existing content"
+    And the file input should be cleared
 
   Scenario: Multiple file extractions accumulate content
     Given the user has accessed the application page
-    When the user uploads a text file "sample_text.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a text file "sample_text.txt"
     And the user uploads a text file "another_file.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
     Then the extracted text area contains content from both files
     And the extracted text area contains source information for "sample_text.txt"
     And the extracted text area contains source information for "another_file.txt"

tests/e2e/features/text_management.feature

@@ -20,20 +20,26 @@ Feature: Text Management Functionality
     When the user checks the "追加時に自動で区切りを挿入" checkbox
     Then the automatic separator is enabled
 
-  Scenario: Combining file and URL content with separators
+  Scenario: File upload tab enables automatic extraction
     Given the user has accessed the application page
-    When the user uploads a text file "sample_text.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a text file "sample_text.txt"
+    Then the extracted text area contains content from the file
+    And the extracted text area contains source information for "sample_text.txt"
+    And the file input should be cleared
+
+  Scenario: URL extraction tab requires extraction button
+    Given the user has accessed the application page
+    When the user clicks on the "Webページ抽出" tab
     And the user enters "https://example.com" into the URL input field
     And the user clicks the "URLからテキストを抽出" button
-    Then the extracted text area contains content from both sources
-    And the extracted text area contains source information for "sample_text.txt"
+    Then the extracted text area contains content from the URL
     And the extracted text area contains source information for "https://example.com"
 
   Scenario: Manual text input preserved during extractions
     Given the user has accessed the application page
     And the user has entered "Manual input content" into the extracted text area
-    When the user uploads a text file "sample_text.txt"
-    And the user clicks the "ファイルからテキストを抽出" button
+    When the user clicks on the "ファイルアップロード" tab
+    And the user uploads a text file "sample_text.txt"
     Then the extracted text area contains "Manual input content"
     And the extracted text area contains content from the file

tests/e2e/features/url_extraction.feature

@@ -9,34 +9,40 @@ Feature: URL extraction functionality
 
   Scenario: Extract text from a valid URL
     Given the user has accessed the application page
-    When the user enters "https://example.com" into the URL input field
+    When the user clicks on the "Webページ抽出" tab
+    And the user enters "https://example.com" into the URL input field
     And the user clicks the "URLからテキストを抽出" button
     Then the extracted text area shows content
     And the "トーク原稿を生成" button is enabled
 
   Scenario: Enter an invalid URL
     Given the user has accessed the application page
-    When the user enters "invalid-url" into the URL input field
+    When the user clicks on the "Webページ抽出" tab
+    And the user enters "invalid-url" into the URL input field
     And the user clicks the "URLからテキストを抽出" button
     Then the extracted text area shows an error message
     And the "トーク原稿を生成" button remains disabled
 
   Scenario: Extract text from GitHub README URL
     Given the user has accessed the application page
-    When the user enters a GitHub README URL into the URL input field
+    When the user clicks on the "Webページ抽出" tab
+    And the user enters a GitHub README URL into the URL input field
     And the user clicks the "URLからテキストを抽出" button
     Then the extracted text area shows GitHub README content
 
   Scenario: Click extract button with empty URL field
+    Given the application is running
     Given the user has accessed the application page
-    When the user leaves the URL input field empty
+    When the user clicks on the "Webページ抽出" tab
+    And the user leaves the URL input field empty
     And the user clicks the "URLからテキストを抽出" button
     Then the extracted text area shows an error message
 
   Scenario: URL extraction appends to existing text with separator
     Given the user has accessed the application page
     And the user has entered "Existing content" into the extracted text area
-    When the user enters "https://example.com" into the URL input field
+    When the user clicks on the "Webページ抽出" tab
+    And the user enters "https://example.com" into the URL input field
     And the user clicks the "URLからテキストを抽出" button
     Then the extracted text area shows content with source separator
     And the extracted text area contains "Existing content"
@@ -46,7 +52,8 @@ Feature: URL extraction functionality
     Given the user has accessed the application page
     And the user unchecks the "追加時に自動で区切りを挿入" checkbox
     And the user has entered "Existing content" into the extracted text area
-    When the user enters "https://example.com" into the URL input field
+    When the user clicks on the "Webページ抽出" tab
+    And the user enters "https://example.com" into the URL input field
     And the user clicks the "URLからテキストを抽出" button
     Then the extracted text area shows appended content without separator
     And the extracted text area contains "Existing content"

tests/e2e/steps/audio_generation_steps.py

@@ -16,8 +16,8 @@ def podcast_script_is_generated(page: Page):
         page: Playwright page object
     """
 
-    # Enter test text in the input field
-    text_area = page.locator("textarea").first
+    # Enter test text in the extracted text area
+    text_area = page.locator('textarea[placeholder*="ファイルをアップロードするか"]')
     test_text = """
     機械学習の最新研究によれば、大規模言語モデルは自然言語処理タスクにおいて
     人間に匹敵する性能を発揮することが可能になっています。

tests/e2e/steps/common_steps.py

@@ -74,17 +74,22 @@ def user_has_accessed_application_page(page: Page, app_environment):
     heading = page.locator('text="トーク原稿の生成"')
     expect(heading).to_be_visible(timeout=10000)
 
-    # Verify file input element is displayed
+    # Verify tabs are present
+    file_upload_tab = page.get_by_role("tab", name="ファイルアップロード")
+    expect(file_upload_tab).to_be_visible()
+
+    web_extraction_tab = page.get_by_role("tab", name="Webページ抽出")
+    expect(web_extraction_tab).to_be_visible()
+
+    # Verify file input element is available (may be hidden initially due to tabs)
     file_input = page.locator('input[type="file"]')
     expect(file_input).to_be_attached()
 
-    # Verify URL input element is displayed
-    url_input = page.locator('textarea[placeholder="https://example.com/page"]')
-    expect(url_input).to_be_visible()
-
-    # Verify URL extraction button is displayed
-    extract_button = page.locator('button:has-text("URLからテキストを抽出")')
-    expect(extract_button).to_be_visible()
+    # Verify extracted text area is visible
+    extracted_text_area = page.locator(
+        'textarea[placeholder*="ファイルをアップロードするか"]'
+    )
+    expect(extracted_text_area).to_be_visible()
 
     logger.info("All main UI elements are visible and accessible")
 

tests/e2e/steps/file_upload_steps.py

@@ -116,19 +116,62 @@ def user_clicks_file_extract_button(page: Page):
     logger.info("File extraction button clicked successfully")
 
 
+@when('the user clicks on the "ファイルアップロード" tab')
+def user_clicks_file_upload_tab(page: Page):
+    """The user clicks on the file upload tab."""
+    from tests.utils.logger import test_logger as logger
+
+    logger.info("Clicking file upload tab")
+
+    # Look for the tab using different possible selectors
+    tab_selectors = [
+        'button[role="tab"]:has-text("ファイルアップロード")',
+        '.tab-nav button:has-text("ファイルアップロード")',
+        'button:has-text("ファイルアップロード")',
+        '*[data-testid*="tab"]:has-text("ファイルアップロード")',
+    ]
+
+    tab_clicked = False
+    for selector in tab_selectors:
+        tab = page.locator(selector)
+        if tab.count() > 0 and tab.first.is_visible():
+            tab.first.click()
+            tab_clicked = True
+            break
+
+    if not tab_clicked:
+        # Fallback: look for any clickable element with the text
+        tab = page.get_by_text("ファイルアップロード")
+        if tab.count() > 0:
+            tab.first.click()
+            tab_clicked = True
+
+    if not tab_clicked:
+        raise Exception("File upload tab not found")
+
+    page.wait_for_timeout(1000)
+    logger.info("File upload tab clicked successfully")
+
+
 @then("the file input should be cleared")
 def file_input_should_be_cleared(page: Page):
-    """The file input should be cleared after extraction."""
+    """The file input should be cleared after upload."""
     from tests.utils.logger import test_logger as logger
 
     logger.info("Checking if file input is cleared")
 
-    file_input = page.locator('input[type="file"]').first
+    # Look for file input element
+    file_input = page.locator('input[type="file"]')
+    expect(file_input).to_be_visible()
+
+    # Check if file input has no value (cleared)
+    input_value = file_input.input_value()
+    logger.info(f"File input value: '{input_value}'")
 
-    # Check if the file input has been cleared
-    # In Gradio, this might show as empty or with a default placeholder
-    files = file_input.input_value()
-    assert files == "" or files is None, "File input should be cleared after extraction"
+    # File input should be empty after automatic extraction
+    assert (
+        input_value == "" or input_value is None
+    ), "File input should be cleared after extraction"
 
     logger.info("File input is cleared as expected")
 

tests/e2e/steps/script_generation_steps.py

@@ -18,8 +18,8 @@ def text_is_entered(page: Page):
         page: Playwright page object
     """
 
-    # Enter test text in the input field
-    text_area = page.locator("textarea").first
+    # Enter test text in the extracted text area
+    text_area = page.locator('textarea[placeholder*="ファイルをアップロードするか"]')
     test_text = """
     機械学習の最新研究によれば、大規模言語モデルは自然言語処理タスクにおいて
     人間に匹敵する性能を発揮することが可能になっています。

tests/e2e/steps/text_management_steps.py

@@ -138,6 +138,76 @@ def user_clicks_clear_text_button(page: Page):
     logger.info("Clear text button clicked successfully")
 
 
+@when('the user clicks on the "ファイルアップロード" tab')
+def user_clicks_file_upload_tab(page: Page):
+    """The user clicks on the file upload tab."""
+    logger.info("Clicking file upload tab")
+
+    # Look for the tab using different possible selectors
+    tab_selectors = [
+        'button[role="tab"]:has-text("ファイルアップロード")',
+        '.tab-nav button:has-text("ファイルアップロード")',
+        'button:has-text("ファイルアップロード")',
+        '*[data-testid*="tab"]:has-text("ファイルアップロード")',
+    ]
+
+    tab_clicked = False
+    for selector in tab_selectors:
+        tab = page.locator(selector)
+        if tab.count() > 0 and tab.first.is_visible():
+            tab.first.click()
+            tab_clicked = True
+            break
+
+    if not tab_clicked:
+        # Fallback: look for any clickable element with the text
+        tab = page.get_by_text("ファイルアップロード")
+        if tab.count() > 0:
+            tab.first.click()
+            tab_clicked = True
+
+    if not tab_clicked:
+        raise Exception("File upload tab not found")
+
+    time.sleep(1)
+    logger.info("File upload tab clicked successfully")
+
+
+@when('the user clicks on the "Webページ抽出" tab')
+def user_clicks_web_extraction_tab(page: Page):
+    """The user clicks on the web page extraction tab."""
+    logger.info("Clicking web page extraction tab")
+
+    # Look for the tab using different possible selectors
+    tab_selectors = [
+        'button[role="tab"]:has-text("Webページ抽出")',
+        '.tab-nav button:has-text("Webページ抽出")',
+        'button:has-text("Webページ抽出")',
+        '*[data-testid*="tab"]:has-text("Webページ抽出")',
+    ]
+
+    tab_clicked = False
+    for selector in tab_selectors:
+        tab = page.locator(selector)
+        if tab.count() > 0 and tab.first.is_visible():
+            tab.first.click()
+            tab_clicked = True
+            break
+
+    if not tab_clicked:
+        # Fallback: look for any clickable element with the text
+        tab = page.get_by_text("Webページ抽出")
+        if tab.count() > 0:
+            tab.first.click()
+            tab_clicked = True
+
+    if not tab_clicked:
+        raise Exception("Web page extraction tab not found")
+
+    time.sleep(1)
+    logger.info("Web page extraction tab clicked successfully")
+
+
 @when('the user clicks the "ファイルからテキストを抽出" button')
 def user_clicks_file_extract_button(page: Page):
     """The user clicks the file text extraction button."""
@@ -271,34 +341,21 @@ def text_area_contains_source_info(page: Page, source: str):
 
 @then("the file input should be cleared")
 def file_input_should_be_cleared(page: Page):
-    """The file input should be cleared after extraction."""
+    """The file input should be cleared after upload."""
     logger.info("Checking if file input is cleared")
 
-    # ファイル入力フィールドを見つける（存在することを確認）
+    # Look for file input element
     file_input = page.locator('input[type="file"]')
-    expect(file_input).to_be_attached()
-
-    # Gradioは extraction後に一時的にfile inputを非表示にするため、
-    # 少し待ってから再度表示されることを確認
-    page.wait_for_timeout(1000)  # 1秒待機
-
-    # ファイル入力が再び利用可能になることを確認
-    # または非表示状態でもクリアされていることを確認
-    try:
-        # まず表示状態を確認
-        expect(file_input).to_be_visible(timeout=3000)
-        input_value = file_input.input_value()
-        logger.info(f"File input value: '{input_value}'")
-        assert (
-            input_value == ""
-        ), f"Expected empty file input, but found: '{input_value}'"
-    except AssertionError:
-        # 非表示の場合でも、要素は存在し、クリアされた状態であることを確認
-        logger.info(
-            "File input is hidden after extraction, which is expected Gradio behavior"
-        )
-        # 代わりに、新しいファイルアップロードが可能であることを確認
-        expect(file_input).to_be_attached()
+    expect(file_input).to_be_attached()  # Check element exists, not visibility
+
+    # Check if file input has no value (cleared)
+    input_value = file_input.input_value()
+    logger.info(f"File input value: '{input_value}'")
+
+    # File input should be empty after automatic extraction
+    assert (
+        input_value == "" or input_value is None
+    ), "File input should be cleared after extraction"
 
     logger.info("File input is cleared as expected")
 
@@ -633,6 +690,62 @@ def text_area_contains_existing_content(page: Page):
     logger.info("Text area contains 'Existing content' as expected")
 
 
+@then("the file upload area should be visible")
+def file_upload_area_should_be_visible(page: Page):
+    """The file upload area should be visible."""
+    logger.info("Checking if file upload area is visible")
+
+    file_upload = page.locator('input[type="file"]')
+    expect(file_upload).to_be_visible()
+    logger.info("File upload area is visible")
+
+
+@then("the file upload area should be hidden")
+def file_upload_area_should_be_hidden(page: Page):
+    """The file upload area should be hidden."""
+    logger.info("Checking if file upload area is hidden")
+
+    file_upload = page.locator('input[type="file"]')
+    expect(file_upload).to_be_hidden()
+    logger.info("File upload area is hidden")
+
+
+@then("the URL input area should be visible")
+def url_input_area_should_be_visible(page: Page):
+    """The URL input area should be visible."""
+    logger.info("Checking if URL input area is visible")
+
+    url_input = page.locator('textarea[placeholder="https://example.com/page"]')
+    expect(url_input).to_be_visible()
+    logger.info("URL input area is visible")
+
+
+@then("the URL input area should be hidden")
+def url_input_area_should_be_hidden(page: Page):
+    """The URL input area should be hidden."""
+    logger.info("Checking if URL input area is hidden")
+
+    url_input = page.locator('textarea[placeholder="https://example.com/page"]')
+    expect(url_input).to_be_hidden()
+    logger.info("URL input area is hidden")
+
+
+@then("the extracted text area contains content from the URL")
+def text_area_contains_url_content(page: Page):
+    """The extracted text area contains content from the URL."""
+    logger.info("Checking if text area contains URL content")
+
+    text_area = page.locator(
+        'textarea[placeholder*="ファイルをアップロードするか、URLを入力するか"]'
+    )
+    expect(text_area).to_be_visible()
+
+    text_content = text_area.input_value()
+    assert len(text_content.strip()) > 0, "Text area should contain URL content"
+
+    logger.info("Text area contains URL content as expected")
+
+
 @then('the extracted text area contains "Manual input content"')
 def text_area_contains_manual_input_content(page: Page):
     """The extracted text area contains 'Manual input content'."""

tests/e2e/steps/url_extraction_steps.py

@@ -13,6 +13,12 @@ def user_enters_url(page: Page, url: str):
     """The user enters a URL into the URL input field."""
     logger.info(f"Entering URL: {url}")
 
+    # Make sure the Web page extraction tab is active first
+    web_tab = page.get_by_role("tab", name="Webページ抽出")
+    if web_tab.is_visible():
+        web_tab.click()
+        time.sleep(1)
+
     # URL入力フィールドを見つけて入力
     url_input = page.locator('textarea[placeholder="https://example.com/page"]')
     expect(url_input).to_be_visible()
@@ -29,6 +35,12 @@ def user_enters_github_readme_url(page: Page):
     )
     logger.info(f"Entering GitHub README URL: {github_readme_url}")
 
+    # Make sure the Web page extraction tab is active first
+    web_tab = page.get_by_role("tab", name="Webページ抽出")
+    if web_tab.is_visible():
+        web_tab.click()
+        time.sleep(1)
+
     url_input = page.locator('textarea[placeholder="https://example.com/page"]')
     expect(url_input).to_be_visible()
     url_input.fill(github_readme_url)
@@ -41,6 +53,12 @@ def user_leaves_url_field_empty(page: Page):
     """The user leaves the URL input field empty."""
     logger.info("Leaving URL field empty")
 
+    # Make sure the Web page extraction tab is active first
+    web_tab = page.get_by_role("tab", name="Webページ抽出")
+    if web_tab.is_visible():
+        web_tab.click()
+        time.sleep(1)
+
     # URL入力フィールドが存在することを確認（何も入力しない）
     url_input = page.locator('textarea[placeholder="https://example.com/page"]')
     expect(url_input).to_be_visible()

yomitalk/app.py

@@ -335,6 +335,10 @@ class PaperPodcastApp:
         session_id = request.session_hash
         return UserSession(session_id)
 
+    def clear_extracted_text(self) -> str:
+        """Clear the extracted text area."""
+        return ""
+
     def set_openai_api_key(self, api_key: str, user_session: UserSession):
         """Set the OpenAI API key for the specific user session."""
         if not api_key or api_key.strip() == "":
@@ -500,6 +504,35 @@ class PaperPodcastApp:
             logger.error(error_msg)
             return f"Error: {str(e)}", user_session
 
+    def extract_file_text_auto(
+        self,
+        file_obj,
+        existing_text: str,
+        add_separator: bool,
+        user_session: UserSession,
+    ) -> Tuple[None, str, UserSession]:
+        """Extract text from uploaded file automatically (for file upload mode)."""
+        if file_obj is None:
+            logger.warning("No file provided for automatic extraction")
+            return None, existing_text, user_session
+
+        # Extract new text from file
+        new_text = ContentExtractor.extract_text(file_obj)
+
+        # Get source name from file
+        source_name = ContentExtractor.get_source_name_from_file(file_obj)
+
+        # Append to existing text with source information
+        combined_text = ContentExtractor.append_text_with_source(
+            existing_text, new_text, source_name, add_separator
+        )
+
+        logger.debug(
+            f"Auto file text extraction completed for session {user_session.session_id}"
+        )
+        # Return None for file_input to clear it after extraction
+        return None, combined_text, user_session
+
     def generate_podcast_audio_streaming(
         self, text: str, user_session: UserSession, progress=gr.Progress()
     ):
@@ -832,25 +865,20 @@ class PaperPodcastApp:
                     # サポートしているファイル形式の拡張子を取得
                     supported_extensions = ContentExtractor.SUPPORTED_EXTENSIONS
 
-                    # Step 1: Content Extraction (Left: File, Right: URL)
-                    gr.Markdown(
-                        "### 解説対象テキストの作成（ファイル抽出 or Webページ抽出 or テキストを直接編集）"
-                    )
-                    with gr.Row(equal_height=True):
-                        with gr.Column():
+                    # Content extraction tabs
+                    gr.Markdown("### 解説対象テキストの作成")
+
+                    extraction_tabs = gr.Tabs()
+                    with extraction_tabs:
+                        with gr.TabItem("ファイルアップロード"):
                             file_input = gr.File(
                                 file_types=supported_extensions,
                                 type="filepath",
                                 label=f"ファイルをアップロード（{', '.join(supported_extensions)}）",
                                 height=120,
                             )
-                            file_extract_btn = gr.Button(
-                                "ファイルからテキストを抽出",
-                                variant="secondary",
-                                size="lg",
-                            )
 
-                        with gr.Column():
+                        with gr.TabItem("Webページ抽出"):
                             url_input = gr.Textbox(
                                 placeholder="https://example.com/page",
                                 label="WebページのURLを入力",
@@ -858,35 +886,29 @@ class PaperPodcastApp:
                                 lines=2,
                             )
                             url_extract_btn = gr.Button(
-                                "URLからテキストを抽出", variant="secondary", size="lg"
+                                "URLからテキストを抽出", variant="primary", size="lg"
                             )
 
-                    # Step 2: Text Management Controls
+                    # Auto separator checkbox and clear button in the same row
                     with gr.Row(equal_height=True):
-                        with gr.Column(scale=2, min_width=300):
+                        with gr.Column(scale=3):
                             auto_separator_checkbox = gr.Checkbox(
                                 label="テキスト抽出時に区切りを自動挿入",
                                 value=True,
                                 info="ファイル名やURLの情報を含む区切り線を自動挿入します",
                             )
-                        with gr.Column(scale=1, min_width=150):
-                            clear_text_btn = gr.ClearButton(
-                                components=[],  # 後でextracted_textを設定
-                                value="テキストをクリア",
-                                variant="secondary",
-                                size="lg",
+                        with gr.Column(scale=1):
+                            clear_text_btn = gr.Button(
+                                "テキストをクリア", variant="secondary", size="sm"
                             )
 
-                    # Step 3: Extracted Text Display
+                    # Extracted text display
                     extracted_text = gr.Textbox(
                         label="解説対象テキスト（トークの元ネタ）",
-                        placeholder="ファイルをアップロードするか、URLを入力するか、直接ここにテキストを貼り付けてください...",
+                        placeholder="ファイルをアップロードするか、URLを入力するか、直接ここにテキストを入力してください...",
                         lines=10,
                     )
 
-                    # ClearButtonにextracted_textを設定
-                    clear_text_btn.add([extracted_text])
-
                 with gr.Column(variant="panel"):
                     gr.Markdown("### プロンプト設定")
                     document_type_radio = gr.Radio(
@@ -1054,9 +1076,16 @@ class PaperPodcastApp:
             )
 
             # Set up event handlers
-            # ファイル抽出ボタンのイベントハンドラー
-            file_extract_btn.click(
-                fn=self.extract_file_text,
+            # Clear text button
+            clear_text_btn.click(
+                fn=self.clear_extracted_text,
+                outputs=[extracted_text],
+                queue=False,
+            )
+
+            # Auto file extraction when file is uploaded (file upload mode)
+            file_input.change(
+                fn=self.extract_file_text_auto,
                 inputs=[
                     file_input,
                     extracted_text,