コードを一切書かずにGUIアプリ完成！バイブコーディングで作るJupyterノートブック比較ツール

import flet as ft
import nbformat
import os
from typing import List, Optional

def main(page: ft.Page):
    page.title = "IPYNBコードセル比較"
    page.padding = 20
    
    def load_code_cells(file_path: str) -> List[str]:
        """ipynbファイルからコードセルを抽出する"""
        if not os.path.exists(file_path):
            return []
            
        with open(file_path, 'r', encoding='utf-8') as f:
            nb = nbformat.read(f, as_version=4)
            
        code_cells = []
        for cell in nb.cells:
            if cell.cell_type == 'code':
                code_cells.append(cell.source)
                
        return code_cells

    def update_display():
        """両方のノートブックのコードセルを表示する"""
        # 左側のグリッドをクリア
        left_column.controls.clear()
        for code in left_code_cells:
            left_column.controls.append(
                ft.Container(
                    content=ft.TextField(
                        value=code,
                        multiline=True,
                        read_only=True,
                        min_lines=3,
                        max_lines=10,
                    ),
                    padding=10,
                    border=ft.border.all(1, ft.colors.GREY_400),
                    border_radius=5,
                )
            )

        # 右側のグリッドをクリア
        right_column.controls.clear()
        for code in right_code_cells:
            right_column.controls.append(
                ft.Container(
                    content=ft.TextField(
                        value=code,
                        multiline=True,
                        read_only=True,
                        min_lines=3,
                        max_lines=10,
                    ),
                    padding=10,
                    border=ft.border.all(1, ft.colors.GREY_400),
                    border_radius=5,
                )
            )
        page.update()

    def pick_files_result(e: ft.FilePickerResultEvent):
        """ファイル選択後の処理"""
        if e.files:
            file_path = e.files[0].path
            if left_file_picker.data == "left":
                global left_code_cells
                left_code_cells = load_code_cells(file_path)
                left_file_text.value = os.path.basename(file_path)
            else:
                global right_code_cells
                right_code_cells = load_code_cells(file_path)
                right_file_text.value = os.path.basename(file_path)
            
            update_display()
            page.update()

    # ファイル選択用のPicker
    file_picker = ft.FilePicker(on_result=pick_files_result)
    page.overlay.append(file_picker)

    # 左側のファイル選択ボタンとファイル名表示
    left_file_picker = ft.ElevatedButton(
        "左側のノートブックを選択",
        icon=ft.icons.UPLOAD_FILE,
        on_click=lambda _: pick_file("left")
    )
    left_file_text = ft.Text()
    
    # 右側のファイル選択ボタンとファイル名表示
    right_file_picker = ft.ElevatedButton(
        "右側のノートブックを選択",
        icon=ft.icons.UPLOAD_FILE,
        on_click=lambda _: pick_file("right")
    )
    right_file_text = ft.Text()

    def pick_file(side: str):
        """ファイル選択ダイアログを表示"""
        file_picker.data = side
        file_picker.pick_files(
            allow_multiple=False,
            allowed_extensions=["ipynb"]
        )

    # コードセルを格納するリスト
    left_code_cells: List[str] = []
    right_code_cells: List[str] = []

    # 2列のグリッドレイアウト
    left_column = ft.Column(scroll=ft.ScrollMode.AUTO, expand=True)
    right_column = ft.Column(scroll=ft.ScrollMode.AUTO, expand=True)

    # メインレイアウト
    page.add(
        ft.Row([
            ft.Column([left_file_picker, left_file_text], expand=True),
            ft.Column([right_file_picker, right_file_text], expand=True),
        ]),
        ft.Row([
            left_column,
            right_column,
        ], expand=True),
    )

ft.app(target=main)

import flet as ft

def main(page: ft.Page):
    page.title = "テストグリッド"
    page.padding = 20
    page.window_width = 400
    page.window_height = 600

    # 1列のグリッドレイアウト
    column = ft.Column(
        controls=[
            ft.Container(
                content=ft.Text("1", size=20, color=ft.colors.WHITE),
                bgcolor=ft.colors.BLACK,
                padding=10,
                border_radius=5,
                width=200,
                height=50,
                alignment=ft.alignment.center,
            ),
            ft.Container(
                content=ft.Text("2", size=20, color=ft.colors.WHITE),
                bgcolor=ft.colors.BLACK,
                padding=10,
                border_radius=5,
                width=200,
                height=50,
                alignment=ft.alignment.center,
            ),
            ft.Container(
                content=ft.Text("3", size=20, color=ft.colors.WHITE),
                bgcolor=ft.colors.BLACK,
                padding=10,
                border_radius=5,
                width=200,
                height=50,
                alignment=ft.alignment.center,
            ),
        ],
        spacing=10,
        alignment=ft.MainAxisAlignment.START,
    )

    # メインレイアウト
    page.add(column)

ft.app(target=main)