Skip to content

Commit 87e2147

Browse files
nowgnuesLeenowgnuesLee
committed
docs: add Start From URL and announcement banner to start page docs
Resolves #6563 Add Start From URL card (GitHub/GitLab/Notebook import), AnnouncementAlert, card rearrangement details. Update all 4 languages.
1 parent 5aa83a9 commit 87e2147

4 files changed

Lines changed: 305 additions & 25 deletions

File tree

‎packages/backend.ai-webui-docs/src/en/start/start.md‎

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,85 @@
11
# Start Page
22

3-
On the Start page, users can quickly access frequently used WebUI features.
4-
Currently, shortcuts are available for [creating storage folders](../vfolder/vfolder.md#create-storage-folder), [launching interactive or batch session](../sessions_all/sessions_all.md#create_session),
5-
and [creating model service](../model_serving/model_serving.md). The position can be adjusted using the button at the top-left corner of each card.
3+
The Start page provides quick access to frequently used WebUI features through
4+
action cards. Each card represents a common workflow such as creating storage
5+
folders, launching sessions, starting model services, or importing projects from
6+
external URLs.
67

78
![](../images/start_page.png)
89

10+
## Announcement Banner
11+
12+
If your system administrator has published an announcement, it appears as a
13+
banner at the top of the Start page. You can dismiss the banner by clicking the
14+
close icon. The announcement supports Markdown formatting and may contain
15+
important notices about system maintenance, updates, or usage guidelines.
16+
17+
## Action Cards
18+
19+
The Start page displays the following action cards by default:
20+
21+
- **Create New Storage Folder**: Create a storage folder and upload files. This
22+
is an essential first step for training models or providing external services.
23+
Clicking the button opens the folder creation dialog.
24+
- **Start Interactive Session**: Create an interactive session to train a model.
25+
Choose your preferred environment and resources to run your code.
26+
- **Start Batch Session**: Create a batch session for predefined files or
27+
scheduled tasks. Enter the command, set the date and time, and run the session
28+
on demand.
29+
- **Start Model Service**: Select a trained model to share with others by
30+
creating a model service endpoint.
31+
- **Start From URL**: Import your project and code from various environments
32+
such as GitHub, GitLab, or Jupyter Notebooks via URL.
933

1034
:::note
11-
Depending on the server configuration, the model service feature may not be available. If you want to use model service
12-
feature, please contact your system administrator.
13-
:::
35+
Depending on the server configuration, some cards such as the model service card
36+
may not be available. If you want to use these features, please contact your
37+
system administrator.
38+
:::
39+
40+
## Start From URL
41+
42+
The **Start From URL** card allows you to import and run projects directly from
43+
external sources. Clicking the card opens a dialog with three tabs:
44+
45+
### Import Notebook
46+
47+
1. Enter a Jupyter Notebook URL (must end with `.ipynb`) in the **Notebook URL**
48+
field
49+
2. Click **Import & Run** to automatically create a session and open the
50+
notebook in Jupyter
51+
52+
You can also click the dropdown arrow next to the button and select
53+
**Start with options** to customize the session environment before launching.
54+
55+
At the bottom of the tab, you can generate a "Run on Backend.AI" badge code.
56+
Copy the HTML or Markdown badge code to embed a direct-launch link in your
57+
project documentation.
58+
59+
### Import GitHub Repository
60+
61+
1. Enter a valid GitHub repository URL in the **GitHub URL** field
62+
2. Select a **Storage Host** where the repository will be saved
63+
3. Optionally set the **Folder Usage Mode** (General or Models)
64+
4. Click **Get To Folder** to clone the repository into a new storage folder
65+
66+
The imported repository is converted to a storage folder that can be mounted
67+
when starting a session.
68+
69+
### Import GitLab Repository
70+
71+
1. Enter a valid GitLab repository URL in the **GitLab URL** field
72+
2. Optionally specify a **GitLab Branch Name** (defaults to `master`)
73+
3. Select a **Storage Host** where the repository will be saved
74+
4. Optionally set the **Folder Usage Mode** (General or Models)
75+
5. Click **Get To Folder** to clone the repository into a new storage folder
76+
77+
## Customizing Card Layout
78+
79+
You can rearrange the action cards on the Start page by dragging and dropping
80+
them. Each card has a drag handle at the top-left corner that you can grab to
81+
move the card to a different position.
82+
83+
Your customized card arrangement is automatically saved and persists across
84+
browser sessions. The layout is stored per user, so each user can have their
85+
own preferred arrangement.

‎packages/backend.ai-webui-docs/src/ja/start/start.md‎

Lines changed: 77 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,83 @@
1-
# Start Page
1+
# スタートページ
22

3-
On the Start page, ユーザーs can quickly access frequently used WebUI features.
4-
Currently, shortcuts are available for [creating storage folders](../vfolder/vfolder.md#create-storage-folder), [launching interactive or batch session](../sessions_all/sessions_all.md#create_session),
5-
and [creating model service](../model_serving/model_serving.md). The position can be adjusted using the button at the top-left corner of each card.
3+
スタートページでは、よく使うWebUIの機能にアクションカードを通じてすばやく
4+
アクセスできます。各カードは、ストレージフォルダの作成、セッションの起動、
5+
モデルサービスの開始、外部URLからのプロジェクトインポートなど、主要なワークフロー
6+
を表しています。
67

78
![](../images/start_page.png)
89

10+
## お知らせバナー
11+
12+
システム管理者がお知らせを公開している場合、スタートページの上部にバナーが
13+
表示されます。閉じるアイコンをクリックしてバナーを閉じることができます。
14+
お知らせはMarkdown形式をサポートしており、システムメンテナンス、アップデート、
15+
利用ガイドラインなどの重要な通知が含まれる場合があります。
16+
17+
## アクションカード
18+
19+
スタートページにはデフォルトで以下のアクションカードが表示されます：
20+
21+
- **新しいストレージフォルダを作成**: ストレージフォルダを作成してファイルを
22+
アップロードします。モデルの学習や外部サービス提供の準備に必要な最初の
23+
ステップです。ボタンをクリックするとフォルダ作成ダイアログが開きます。
24+
- **インタラクティブセッション開始**: モデル学習のためのインタラクティブセッションを
25+
作成します。必要な環境とリソースを選択してコードを実行できます。
26+
- **バッチセッション開始**: 準備済みのファイルやスケジュールされたタスクのための
27+
バッチセッションを作成します。コマンドを入力し、日時を設定して実行します。
28+
- **モデルサービス開始**: 学習済みモデルを他のユーザーと共有するためのモデルサービス
29+
エンドポイントを作成します。
30+
- **URLから開始**: GitHub、GitLab、Jupyter NotebookなどのさまざまなURL環境から
31+
プロジェクトとコードをインポートします。
932

1033
:::note
11-
Depending on the server configuration, the model service feature may not be available. If you want to use model service
12-
feature, please contact your system 管理者istrator.
13-
:::
34+
サーバーの設定状況によって、モデルサービスカードなど一部のカードが利用できない
35+
場合があります。これらの機能をご利用になりたい場合は、システム管理者にお問い
36+
合わせください。
37+
:::
38+
39+
## URLから開始
40+
41+
**URLから開始**カードを使用すると、外部ソースからプロジェクトをインポートして
42+
直接実行できます。カードをクリックすると、3つのタブを持つダイアログが開きます。
43+
44+
### ノートブック取り込み
45+
46+
1. **ノートブックのURL**フィールドにJupyter Notebook URL（`.ipynb`で終わる）を
47+
入力します
48+
2. **インポート & 実行**をクリックすると、自動的にセッションが作成され、Jupyterで
49+
ノートブックが開きます
50+
51+
ボタンの横にあるドロップダウン矢印をクリックして**オプション付きで開始**を
52+
選択すると、起動前にセッション環境をカスタマイズできます。
53+
54+
タブの下部では、「Run on Backend.AI」バッジコードを生成できます。HTMLまたは
55+
Markdownのバッジコードをコピーして、プロジェクトのドキュメントに直接実行リンクを
56+
埋め込むことができます。
57+
58+
### GitHubリポジトリをインポートする
59+
60+
1. **GitHub URL**フィールドに有効なGitHubリポジトリURLを入力します
61+
2. リポジトリを保存する**ストレージホスト**を選択します
62+
3. 必要に応じて**フォルダ使用モード**（一般またはモデル）を設定します
63+
4. **フォルダに移動**をクリックしてリポジトリを新しいストレージフォルダにクローンします
64+
65+
インポートされたリポジトリはストレージフォルダに変換され、セッション開始時に
66+
マウントできます。
67+
68+
### GitLabリポジトリ取り込み
69+
70+
1. **GitLab URL**フィールドに有効なGitLabリポジトリURLを入力します
71+
2. 必要に応じて**GitLabブランチ名**を指定します（デフォルト: `master`）
72+
3. リポジトリを保存する**ストレージホスト**を選択します
73+
4. 必要に応じて**フォルダ使用モード**（一般またはモデル）を設定します
74+
5. **フォルダに移動**をクリックしてリポジトリを新しいストレージフォルダにクローンします
75+
76+
## カードレイアウトのカスタマイズ
77+
78+
スタートページのアクションカードはドラッグ＆ドロップで並べ替えることができます。
79+
各カードの左上にあるドラッグハンドルを掴んで、希望の位置に移動できます。
80+
81+
カスタマイズされたカード配置は自動的に保存され、ブラウザセッション間で保持
82+
されます。レイアウトはユーザーごとに保存されるため、各ユーザーが独自の配置を
83+
設定できます。

‎packages/backend.ai-webui-docs/src/ko/start/start.md‎

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,80 @@
11
# 시작 페이지
22

3-
시작 페이지에서는 자주 사용하는 WebUI 기능에 빠르게 접근할 수 있습니다.
4-
현재 [스토리지 폴더 생성](../vfolder/vfolder.md#create-storage-folder), [대화형 또는 배치 세션 실행](../sessions_all/sessions_all.md#create_session),
5-
[모델 서비스 생성](../model_serving/model_serving.md)에 대한 바로가기가 제공됩니다. 각 카드의 좌측 상단 버튼을 사용하여 위치를 조정할 수 있습니다.
3+
시작 페이지에서는 자주 사용하는 WebUI 기능에 액션 카드를 통해 빠르게 접근할 수
4+
있습니다. 각 카드는 스토리지 폴더 생성, 세션 실행, 모델 서비스 시작, 외부 URL에서
5+
프로젝트 가져오기 등 주요 워크플로를 나타냅니다.
66

77
![](../images/start_page.png)
88

9+
## 공지사항 배너
10+
11+
시스템 관리자가 공지사항을 게시한 경우, 시작 페이지 상단에 배너가 표시됩니다.
12+
닫기 아이콘을 클릭하여 배너를 닫을 수 있습니다. 공지사항은 Markdown 형식을
13+
지원하며, 시스템 유지보수, 업데이트, 사용 가이드라인 등 중요한 안내를 포함할 수
14+
있습니다.
15+
16+
## 액션 카드
17+
18+
시작 페이지에는 기본적으로 다음 액션 카드가 표시됩니다:
19+
20+
- **새 스토리지 폴더 생성**: 스토리지 폴더를 생성하고 파일을 업로드합니다. 모델을
21+
학습시키거나 외부 서비스를 제공하기 위한 필수적인 첫 단계입니다. 버튼을 클릭하면
22+
폴더 생성 대화상자가 열립니다.
23+
- **Interactive 세션 생성**: 모델을 학습시킬 대화형 세션을 생성합니다. 원하는
24+
환경과 리소스를 선택하여 코드를 실행할 수 있습니다.
25+
- **Batch 세션 생성**: 미리 정의된 파일 또는 예약된 작업을 위한 배치 세션을
26+
생성합니다. 명령을 입력하고 날짜와 시간을 설정한 다음 필요에 따라 세션을
27+
실행합니다.
28+
- **모델 서비스 시작**: 학습이 끝난 모델을 다른 사람과 공유하기 위해 모델 서비스
29+
엔드포인트를 생성합니다.
30+
- **URL로 시작**: GitHub, GitLab, Jupyter Notebook 등 다양한 환경에서 URL을 통해
31+
프로젝트와 코드를 가져올 수 있습니다.
932

1033
:::note
11-
서버 설치 및 설정 환경에 따라, 모델 서비스 기능이 비활성화되어 있을 수 있습니다. 모델 서비스 사용을 원하시는 경우, 시스템 관리자에게 문의하십시오.
12-
:::
34+
서버 설치 및 설정 환경에 따라, 모델 서비스 카드 등 일부 카드가 비활성화되어 있을
35+
수 있습니다. 해당 기능의 사용을 원하시는 경우, 시스템 관리자에게 문의하십시오.
36+
:::
37+
38+
## URL로 시작
39+
40+
**URL로 시작** 카드를 사용하면 외부 소스에서 프로젝트를 가져와 바로 실행할 수
41+
있습니다. 카드를 클릭하면 세 개의 탭이 있는 대화상자가 열립니다.
42+
43+
### 노트북 가져오기
44+
45+
1. **가져올 노트북 URL** 필드에 Jupyter Notebook URL(`.ipynb`으로 끝나는)을
46+
입력합니다
47+
2. **가져와서 실행** 버튼을 클릭하면 자동으로 세션이 생성되고 Jupyter에서
48+
노트북이 열립니다
49+
50+
버튼 옆의 드롭다운 화살표를 클릭하고 **설정 후 실행**을 선택하면 실행
51+
전에 세션 환경을 커스터마이즈할 수 있습니다.
52+
53+
탭 하단에서 "Run on Backend.AI" 뱃지 코드를 생성할 수 있습니다. HTML 또는
54+
Markdown 뱃지 코드를 복사하여 프로젝트 문서에 바로 실행 링크를 삽입할 수
55+
있습니다.
56+
57+
### GitHub 저장소 가져오기
58+
59+
1. **GitHub URL** 필드에 유효한 GitHub 저장소 URL을 입력합니다
60+
2. 저장소가 저장될 **스토리지 호스트**를 선택합니다
61+
3. 필요한 경우 **폴더 사용 모드**(일반 또는 모델)를 설정합니다
62+
4. **가져오기** 버튼을 클릭하여 저장소를 새 스토리지 폴더로 복제합니다
63+
64+
가져온 저장소는 스토리지 폴더로 변환되며, 세션 시작 시 마운트할 수 있습니다.
65+
66+
### GitLab 저장소 가져오기
67+
68+
1. **GitLab URL** 필드에 유효한 GitLab 저장소 URL을 입력합니다
69+
2. 필요한 경우 **GitLab 브랜치 이름**을 지정합니다 (기본값: `master`)
70+
3. 저장소가 저장될 **스토리지 호스트**를 선택합니다
71+
4. 필요한 경우 **폴더 사용 모드**(일반 또는 모델)를 설정합니다
72+
5. **가져오기** 버튼을 클릭하여 저장소를 새 스토리지 폴더로 복제합니다
73+
74+
## 카드 레이아웃 커스터마이즈
75+
76+
시작 페이지의 액션 카드는 드래그 앤 드롭으로 재배치할 수 있습니다. 각 카드의
77+
좌측 상단에 있는 드래그 핸들을 잡고 원하는 위치로 이동할 수 있습니다.
78+
79+
커스터마이즈된 카드 배치는 자동으로 저장되어 브라우저 세션 간에 유지됩니다.
80+
레이아웃은 사용자별로 저장되므로, 각 사용자가 자신만의 배치를 설정할 수 있습니다.

0 commit comments

Comments
 (0)