docs: add TODO screenshots and fix card titles in start page

nowgnuesLee · nowgnuesLee · commit 5b9a0a9d370e · 2026-04-11T12:46:23.000+09:00
diff --git a/packages/backend.ai-webui-docs/src/en/start/start.md b/packages/backend.ai-webui-docs/src/en/start/start.md
@@ -10,9 +10,12 @@ external URLs.
 ## Announcement Banner
 
 If your system administrator has published an announcement, it appears as a
-banner at the top of the Start page. You can dismiss the banner by clicking the
-close icon. The announcement supports Markdown formatting and may contain
-important notices about system maintenance, updates, or usage guidelines.
+banner at the top of the Start page. The announcement supports Markdown
+formatting and may contain important notices about system maintenance, updates,
+or usage guidelines. You can dismiss the banner by clicking the close icon.
+
+![](../images/start_announcement_banner.png)
+<!-- TODO: Capture screenshot of the announcement banner with sample content -->
 
 ## Action Cards
 
@@ -21,8 +24,8 @@ The Start page displays the following action cards by default:
 - **Create New Storage Folder**: Create a storage folder and upload files. This
   is an essential first step for training models or providing external services.
   Clicking the button opens the folder creation dialog.
-- **Start Interactive Session**: Create an interactive session to train a model.
-  Choose your preferred environment and resources to run your code.
+- **Start Interactive Session**: Create a session to train a model. Choose your
+  preferred environment and resources to run your code.
 - **Start Batch Session**: Create a batch session for predefined files or
   scheduled tasks. Enter the command, set the date and time, and run the session
   on demand.
@@ -40,10 +43,13 @@ system administrator.
 ## Start From URL
 
 The **Start From URL** card allows you to import and run projects directly from
-external sources. Clicking the card opens a dialog with three tabs:
+external sources. Clicking the card opens a dialog with three tabs.
 
 ### Import Notebook
 
+![](../images/start_from_url_notebook.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import Notebook tab -->
+
 1. Enter a Jupyter Notebook URL (must end with `.ipynb`) in the **Notebook URL**
    field
 2. Click **Import & Run** to automatically create a session and open the
@@ -58,6 +64,9 @@ project documentation.
 
 ### Import GitHub Repository
 
+![](../images/start_from_url_github.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitHub Repository tab -->
+
 1. Enter a valid GitHub repository URL in the **GitHub URL** field
 2. Select a **Storage Host** where the repository will be saved
 3. Optionally set the **Folder Usage Mode** (General or Models)
@@ -68,6 +77,9 @@ when starting a session.
 
 ### Import GitLab Repository
 
+![](../images/start_from_url_gitlab.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitLab Repository tab -->
+
 1. Enter a valid GitLab repository URL in the **GitLab URL** field
 2. Optionally specify a **GitLab Branch Name** (defaults to `master`)
 3. Select a **Storage Host** where the repository will be saved
diff --git a/packages/backend.ai-webui-docs/src/ja/start/start.md b/packages/backend.ai-webui-docs/src/ja/start/start.md
@@ -10,23 +10,26 @@
 ## お知らせバナー
 
 システム管理者がお知らせを公開している場合、スタートページの上部にバナーが
-表示されます。閉じるアイコンをクリックしてバナーを閉じることができます。
-お知らせはMarkdown形式をサポートしており、システムメンテナンス、アップデート、
-利用ガイドラインなどの重要な通知が含まれる場合があります。
+表示されます。お知らせはMarkdown形式をサポートしており、システムメンテナンス、
+アップデート、利用ガイドラインなどの重要な通知が含まれる場合があります。
+閉じるアイコンをクリックしてバナーを閉じることができます。
+
+![](../images/start_announcement_banner.png)
+<!-- TODO: Capture screenshot of the announcement banner with sample content -->
 
 ## アクションカード
 
 スタートページにはデフォルトで以下のアクションカードが表示されます：
 
-- **新しいストレージフォルダを作成**: ストレージフォルダを作成してファイルを
-  アップロードします。モデルの学習や外部サービス提供の準備に必要な最初の
-  ステップです。ボタンをクリックするとフォルダ作成ダイアログが開きます。
-- **インタラクティブセッション開始**: モデル学習のためのインタラクティブセッションを
-  作成します。必要な環境とリソースを選択してコードを実行できます。
+- **保存フォルダー作成**: ストレージフォルダを作成してファイルをアップロード
+  します。モデルの学習や外部サービス提供の準備に必要な最初のステップです。
+  ボタンをクリックするとフォルダ作成ダイアログが開きます。
+- **インタラクティブセッション開始**: モデル学習のためのセッションを作成します。
+  必要な環境とリソースを選択してコードを実行できます。
 - **バッチセッション開始**: 準備済みのファイルやスケジュールされたタスクのための
   バッチセッションを作成します。コマンドを入力し、日時を設定して実行します。
-- **モデルサービス開始**: 学習済みモデルを他のユーザーと共有するためのモデルサービス
-  エンドポイントを作成します。
+- **モデルサービス開始**: 学習済みモデルを他のユーザーと共有するためのモデル
+  サービスエンドポイントを作成します。
 - **URLから開始**: GitHub、GitLab、Jupyter NotebookなどのさまざまなURL環境から
   プロジェクトとコードをインポートします。
 
@@ -43,6 +46,9 @@
 
 ### ノートブック取り込み
 
+![](../images/start_from_url_notebook.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import Notebook tab -->
+
 1. **ノートブックのURL**フィールドにJupyter Notebook URL（`.ipynb`で終わる）を
    入力します
 2. **インポート & 実行**をクリックすると、自動的にセッションが作成され、Jupyterで
@@ -57,21 +63,29 @@ Markdownのバッジコードをコピーして、プロジェクトのドキュ
 
 ### GitHubリポジトリをインポートする
 
+![](../images/start_from_url_github.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitHub Repository tab -->
+
 1. **GitHubのURL**フィールドに有効なGitHubリポジトリURLを入力します
 2. リポジトリを保存する**ストレージホスト**を選択します
 3. 必要に応じて**フォルダ利用モード**（一般またはモデル）を設定します
-4. **フォルダに移動**をクリックしてリポジトリを新しいストレージフォルダにクローンします
+4. **フォルダに移動**をクリックしてリポジトリを新しいストレージフォルダにクローン
+   します
 
 インポートされたリポジトリはストレージフォルダに変換され、セッション開始時に
 マウントできます。
 
 ### GitLabリポジトリ取り込み
 
+![](../images/start_from_url_gitlab.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitLab Repository tab -->
+
 1. **GitLabアドレス**フィールドに有効なGitLabリポジトリURLを入力します
 2. 必要に応じて**GitLab ブランチ名**を指定します（デフォルト: `master`）
 3. リポジトリを保存する**ストレージホスト**を選択します
 4. 必要に応じて**フォルダ利用モード**（一般またはモデル）を設定します
-5. **フォルダに移動**をクリックしてリポジトリを新しいストレージフォルダにクローンします
+5. **フォルダに移動**をクリックしてリポジトリを新しいストレージフォルダにクローン
+   します
 
 ## カードレイアウトのカスタマイズ
 
diff --git a/packages/backend.ai-webui-docs/src/ko/start/start.md b/packages/backend.ai-webui-docs/src/ko/start/start.md
@@ -9,39 +9,44 @@
 ## 공지사항 배너
 
 시스템 관리자가 공지사항을 게시한 경우, 시작 페이지 상단에 배너가 표시됩니다.
-닫기 아이콘을 클릭하여 배너를 닫을 수 있습니다. 공지사항은 Markdown 형식을
-지원하며, 시스템 유지보수, 업데이트, 사용 가이드라인 등 중요한 안내를 포함할 수
-있습니다.
+공지사항은 Markdown 형식을 지원하며, 시스템 유지보수, 업데이트, 사용 가이드라인 등
+중요한 안내를 포함할 수 있습니다. 닫기 아이콘을 클릭하여 배너를 닫을 수 있습니다.
+
+![](../images/start_announcement_banner.png)
+<!-- TODO: Capture screenshot of the announcement banner with sample content -->
 
 ## 액션 카드
 
 시작 페이지에는 기본적으로 다음 액션 카드가 표시됩니다:
 
-- **새 스토리지 폴더 생성**: 스토리지 폴더를 생성하고 파일을 업로드합니다. 모델을
-  학습시키거나 외부 서비스를 제공하기 위한 필수적인 첫 단계입니다. 버튼을 클릭하면
-  폴더 생성 대화상자가 열립니다.
-- **Interactive 세션 생성**: 모델을 학습시킬 대화형 세션을 생성합니다. 원하는
-  환경과 리소스를 선택하여 코드를 실행할 수 있습니다.
+- **새 스토리지 폴더 생성하기**: 스토리지 폴더를 생성하고 파일을 업로드합니다.
+  모델을 학습시키거나 외부 서비스를 제공하기 위한 필수적인 첫 단계입니다. 버튼을
+  클릭하면 폴더 생성 대화상자가 열립니다.
+- **Interactive 세션 생성**: 모델을 학습시킬 세션을 생성합니다. 원하는 환경과
+  리소스를 선택하여 코드를 실행할 수 있습니다.
 - **Batch 세션 생성**: 미리 정의된 파일 또는 예약된 작업을 위한 배치 세션을
   생성합니다. 명령을 입력하고 날짜와 시간을 설정한 다음 필요에 따라 세션을
   실행합니다.
 - **모델 서비스 시작**: 학습이 끝난 모델을 다른 사람과 공유하기 위해 모델 서비스
   엔드포인트를 생성합니다.
-- **URL로 시작**: GitHub, GitLab, Jupyter Notebook 등 다양한 환경에서 URL을 통해
+- **URL 로 시작**: GitHub, GitLab, Jupyter Notebook 등 다양한 환경에서 URL을 통해
   프로젝트와 코드를 가져올 수 있습니다.
 
 :::note
 서버 설치 및 설정 환경에 따라, 모델 서비스 카드 등 일부 카드가 비활성화되어 있을
 수 있습니다. 해당 기능의 사용을 원하시는 경우, 시스템 관리자에게 문의하십시오.
 :::
 
-## URL로 시작
+## URL 로 시작
 
-**URL로 시작** 카드를 사용하면 외부 소스에서 프로젝트를 가져와 바로 실행할 수
+**URL 로 시작** 카드를 사용하면 외부 소스에서 프로젝트를 가져와 바로 실행할 수
 있습니다. 카드를 클릭하면 세 개의 탭이 있는 대화상자가 열립니다.
 
 ### 노트북 가져오기
 
+![](../images/start_from_url_notebook.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import Notebook tab -->
+
 1. **가져올 노트북 URL** 필드에 Jupyter Notebook URL(`.ipynb`으로 끝나는)을
    입력합니다
 2. **가져와서 실행** 버튼을 클릭하면 자동으로 세션이 생성되고 Jupyter에서
@@ -56,19 +61,25 @@ Markdown 뱃지 코드를 복사하여 프로젝트 문서에 바로 실행 링
 
 ### GitHub 저장소 가져오기
 
+![](../images/start_from_url_github.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitHub Repository tab -->
+
 1. **GitHub 주소** 필드에 유효한 GitHub 저장소 URL을 입력합니다
 2. 저장소가 저장될 **스토리지 호스트**를 선택합니다
-3. 필요한 경우 **폴더 사용 방식**(일반 또는 모델)를 설정합니다
+3. 필요한 경우 **폴더 사용 방식**(일반 또는 모델)을 설정합니다
 4. **가져오기** 버튼을 클릭하여 저장소를 새 스토리지 폴더로 복제합니다
 
 가져온 저장소는 스토리지 폴더로 변환되며, 세션 시작 시 마운트할 수 있습니다.
 
 ### GitLab 저장소 가져오기
 
+![](../images/start_from_url_gitlab.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitLab Repository tab -->
+
 1. **GitLab 주소** 필드에 유효한 GitLab 저장소 URL을 입력합니다
 2. 필요한 경우 **GitLab 브랜치 이름**을 지정합니다 (기본값: `master`)
 3. 저장소가 저장될 **스토리지 호스트**를 선택합니다
-4. 필요한 경우 **폴더 사용 방식**(일반 또는 모델)를 설정합니다
+4. 필요한 경우 **폴더 사용 방식**(일반 또는 모델)을 설정합니다
 5. **가져오기** 버튼을 클릭하여 저장소를 새 스토리지 폴더로 복제합니다
 
 ## 카드 레이아웃 커스터마이즈
diff --git a/packages/backend.ai-webui-docs/src/th/start/start.md b/packages/backend.ai-webui-docs/src/th/start/start.md
@@ -10,19 +10,22 @@
 ## แบนเนอร์ประกาศ
 
 หากผู้ดูแลระบบได้เผยแพร่ประกาศ จะมีแบนเนอร์แสดงที่ด้านบนของหน้าเริ่มต้น
-คุณสามารถปิดแบนเนอร์ได้โดยคลิกไอคอนปิด ประกาศรองรับรูปแบบ Markdown
-และอาจมีการแจ้งเตือนที่สำคัญเกี่ยวกับการบำรุงรักษาระบบ การอัปเดต หรือ
-แนวทางการใช้งาน
+ประกาศรองรับรูปแบบ Markdown และอาจมีการแจ้งเตือนที่สำคัญเกี่ยวกับ
+การบำรุงรักษาระบบ การอัปเดต หรือแนวทางการใช้งาน คุณสามารถปิดแบนเนอร์ได้
+โดยคลิกไอคอนปิด
+
+![](../images/start_announcement_banner.png)
+<!-- TODO: Capture screenshot of the announcement banner with sample content -->
 
 ## การ์ดการดำเนินการ
 
 หน้าเริ่มต้นแสดงการ์ดการดำเนินการต่อไปนี้ตามค่าเริ่มต้น:
 
-- **สร้างโฟลเดอร์จัดเก็บใหม่**: สร้างโฟลเดอร์จัดเก็บและอัปโหลดไฟล์
+- **สร้างโฟลเดอร์จัดเก็บข้อมูลใหม่**: สร้างโฟลเดอร์จัดเก็บและอัปโหลดไฟล์
   นี่เป็นขั้นตอนแรกที่จำเป็นสำหรับการฝึกโมเดลหรือการให้บริการภายนอก
   การคลิกปุ่มจะเปิดกล่องโต้ตอบการสร้างโฟลเดอร์
-- **เริ่มเซสชันแบบโต้ตอบ**: สร้างเซสชันแบบโต้ตอบเพื่อฝึกโมเดล เลือก
-  สภาพแวดล้อมและทรัพยากรที่ต้องการสำหรับการรันโค้ด
+- **เริ่มเซสชันแบบโต้ตอบ**: สร้างเซสชันเพื่อฝึกโมเดล เลือกสภาพแวดล้อมและ
+  ทรัพยากรที่ต้องการสำหรับการรันโค้ด
 - **เริ่มเซสชันแบทช์**: สร้างเซสชันแบทช์สำหรับไฟล์ที่กำหนดไว้ล่วงหน้า
   หรืองานที่กำหนดเวลาไว้ ป้อนคำสั่ง ตั้งค่าวันที่และเวลา และรันตามต้องการ
 - **เริ่มบริการโมเดล**: สร้าง endpoint บริการโมเดลเพื่อแชร์โมเดลที่ผ่าน
@@ -42,6 +45,9 @@
 
 ### นำเข้าโน้ตบุ๊ก
 
+![](../images/start_from_url_notebook.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import Notebook tab -->
+
 1. ป้อน URL ของ Jupyter Notebook (ต้องลงท้ายด้วย `.ipynb`) ในฟิลด์
    **URL โน้ตบุ๊ก**
 2. คลิก **นำเข้าและรัน** เพื่อสร้างเซสชันอัตโนมัติและเปิดโน้ตบุ๊กใน Jupyter
@@ -54,6 +60,9 @@
 
 ### นำเข้าพื้นที่เก็บข้อมูล GitHub
 
+![](../images/start_from_url_github.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitHub Repository tab -->
+
 1. ป้อน URL พื้นที่เก็บข้อมูล GitHub ที่ถูกต้องในฟิลด์ **URL GitHub**
 2. เลือก **โฮสต์ที่เก็บข้อมูล** ที่จะบันทึกพื้นที่เก็บข้อมูล
 3. ตั้งค่า **โหมดการใช้งานโฟลเดอร์** (ทั่วไปหรือโมเดล) ตามต้องการ
@@ -65,6 +74,9 @@
 
 ### นำเข้าพื้นที่เก็บข้อมูล GitLab
 
+![](../images/start_from_url_gitlab.png)
+<!-- TODO: Capture screenshot of the Start From URL modal showing the Import GitLab Repository tab -->
+
 1. ป้อน URL พื้นที่เก็บข้อมูล GitLab ที่ถูกต้องในฟิลด์ **URL GitLab**
 2. ระบุ **ชื่อ Branch GitLab** ตามต้องการ (ค่าเริ่มต้น: `master`)
 3. เลือก **โฮสต์ที่เก็บข้อมูล** ที่จะบันทึกพื้นที่เก็บข้อมูล
