1. Mục tiêu của phòng thí nghiệm này
Trong phòng thí nghiệm thực hành này, bạn sẽ cài đặt, xác thực Gemini CLI và thử một số trường hợp sử dụng cơ bản.
Kiến thức bạn sẽ học được
- Tìm hiểu những điều cơ bản về Gemini CLI.
- Tìm hiểu cách thực hiện các tác vụ cơ bản bằng Gemini CLI.
2. Trước khi bắt đầu
- Nếu chưa có dự án nào có thể sử dụng, bạn sẽ cần tạo một dự án mới trong Bảng điều khiển GCP.
- Trong phòng thí nghiệm này, chúng ta sẽ sử dụng GCP Cloud Shell để thực hiện các bước bên dưới. Mở Cloud Shell và thiết lập dự án bằng Cloud Shell.
- Mở GCP Cloud Shell Editor bằng cách nhấn vào nút Cloud Shell Editor. Nếu bạn thấy cửa sổ bật lên "Uỷ quyền cho Shell", hãy nhấp để uỷ quyền cho Cloud Shell Editor.
- Bạn có thể kiểm tra xem dự án đã được xác thực hay chưa bằng lệnh sau.
gcloud auth list
- Chạy lệnh sau trong Cloud Shell để xác nhận dự án của bạn
gcloud config list project
- Nếu bạn chưa đặt dự án, hãy dùng lệnh sau để đặt dự án
gcloud config set project <YOUR_PROJECT_ID>
- Chúng ta cần bật một số dịch vụ để chạy phòng thí nghiệm này. Chạy lệnh sau trong Cloud Shell.
gcloud services enable aiplatform.googleapis.com
3. Cài đặt và xác thực
Cài đặt
Gemini CLI được cài đặt sẵn trong Trình chỉnh sửa Cloud Shell của GCP . Nếu muốn sử dụng, bạn có thể bắt đầu ngay.
Bạn cũng có thể cài đặt Gemini CLI trong môi trường cục bộ.
Để cài đặt Gemini CLI trong môi trường cục bộ, bạn cần có Nodejs 20 trở lên. Bạn có thể thực thi lệnh sau để cài đặt Gemini CLI.
npm install -g @google/gemini-cli
Để nâng cấp lên phiên bản mới nhất , hãy dùng lệnh sau
npm update -g @google/gemini-cli
Chạy Gemini bằng cách thực thi lệnh sau tại cửa sổ dòng lệnh.
gemini
Xác thực
Nếu đang sử dụng GCP Cloud Shell Editor, bạn sẽ được xác thực nếu chấp nhận xác thực shell trong khi chạy.
Nếu đang chạy cục bộ và chưa xác thực, bạn sẽ thấy một màn hình như bên dưới.
Bạn cũng có thể nhập /auth để mở màn hình bên dưới.
Hình 1: Gemini CLI sẽ cung cấp cho bạn 3 phương thức để xác thực.
Trước tiên, hãy thoát Gemini CLI bằng lệnh /quit.
Xác thực bằng Google: Việc chạy lệnh /auth trong bảng điều khiển sẽ hiển thị các lựa chọn xác thực. Chọn "Đăng nhập bằng Google" trong số các lựa chọn. Sau đó, màn hình xác thực của Google sẽ xuất hiện trong trình duyệt. Sau khi bạn hoàn tất quá trình đăng nhập, bảng điều khiển cũng sẽ được xác thực. Mặc dù quá trình xác thực đã hoàn tất, nhưng để thực sự sử dụng Gemini CLI, bạn cần chỉ định một dự án trên Google Cloud. Quay lại màn hình bảng điều khiển và chạy lệnh sau để chỉ định dự án (bạn cũng có thể chỉ định dự án trong tệp .env).
export GOOGLE_CLOUD_PROJECT=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Xác thực bằng khoá API: Để xác thực bằng khoá API, bạn sẽ cần có khoá API. Bạn có thể tạo Khoá API trên aistudio.google.com . Sau khi Khoá API được phát hành, hãy đặt khoá đó trong bảng điều khiển như sau:
export GEMINI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Xác thực bằng Vertex AI: Để sử dụng Gemini API thông qua Vertex AI, hãy làm theo các bước sau.
Trước tiên, hãy dùng lệnh bên dưới để xác thực vào Google Cloud.
gcloud auth application-default login
Sau đó, hãy thực thi các lệnh sau trong cửa sổ dòng lệnh
export GOOGLE_GENAI_USE_VERTEXAI=true export GOOGLE_CLOUD_PROJECT=Your GCP Project Name export GOOGLE_CLOUD_LOCATION=us-central1
4. Dùng thử Gemini CLI
Giờ thì bạn đã sẵn sàng dùng thử Gemini CLI. Hãy thử các trường hợp sử dụng sau.
Trước tiên, hãy tạo một thư mục dự án, my_cli_project.
mkdir my_cli_project cd my_cli_project
Khi chạy Gemini từ một thư mục dự án, bạn có thể chạy Gemini CLI một cách an toàn trong phạm vi của thư mục đó.
- Chạy một câu lệnh đơn giản:
What is the weather today in Tokyo
Thao tác này sẽ cho bạn biết thời tiết ở Tokyo. Xin lưu ý rằng việc chạy tự động sẽ sử dụng
GoogleSearch Tool!
- Xác nhận các Công cụ đã cài đặt: Chạy lệnh sau. Bạn sẽ thấy danh sách các công cụ đã cài đặt.
/tools
Hình 2: Danh sách công cụ được hiển thị
- Nhận tin tức từ trang web tin tức địa phương: (ví dụ: https://mainichi.jp, hãy thay đổi thành trang web tin tức địa phương của bạn).
Get me the news summary from https://mainichi.jp/
Bạn sẽ nhận được bản tóm tắt tin tức từ trang web tin tức địa phương. Lưu ý rằng tác nhân tự động sử dụng công cụ WebFetch để tải nội dung xuống từ trang web tin tức và tạo bản tóm tắt.
- Thực hiện một tác vụ gồm nhiều bước(vui lòng thay đổi thành trang web địa phương của bạn): Lấy tin tức cho tôi từ https://mainichi.jp/, chỉ lọc tin tức thể thao và tóm tắt tin tức đó cho tôi.
Get me the news from https://mainichi.jp/ and filter in only the sports news and summarize that for me.
- Chạy lệnh hệ thống : Để chạy lệnh hệ thống, hãy nhấn ! và nhập các lệnh. Để quay lại chế độ bình thường, hãy nhập ! .
Type ! and Enter key. This starts the command mode. ls pwd Type ! to go back to normal mode.
- Tạo trò chơi cờ ca-rô Nhập câu lệnh sau (phiên bản tiếng Anh).
Please develop a Tic-Tac-Toe game that meets the following requirements. The solution should be split into separate HTML, CSS, and JavaScript files, with the JavaScript file handling the majority of the game logic independently.
1. General Requirements
The game format should be a match between one human player and one computer player.
When the game ends (a win/loss is determined, or a draw occurs), display "GAME OVER" on the screen along with the winner's name ("X wins!," "O wins!," or "Draw!").
Provide a "Reset" button to start a new game.
2. HTML (index.html)
Create the basic page structure.
The game board should consist of nine squares (cells). Each cell should be clickable and display the player's mark (X or O).
Provide an element to display the game status (e.g., current player's turn, game result).
Place the reset button for starting a new game.
Link the CSS and JavaScript files appropriately.
3. CSS (style.css)
Style the game board and cells so they are visually clear and easy to understand.
Add borders to the cells to indicate they are clickable areas.
Set appropriate font size and color for the X and O marks to ensure good visibility.
Style the game status display and the "GAME OVER" message to make them stand out.
Consider responsive design to ensure appropriate display on various screen sizes.
4. JavaScript (script.js)
It is strongly requested that the JavaScript file handle all the game logic.
4.1. Game State Management
Define an array or object to manage the game board state (e.g., ['', '', '', '', '', '', '', '', '']).
Define a variable to track the current player (X or O). The initial value should be X.
Define a boolean value to track whether the game has ended (win/loss or draw).
4.2. Game Initialization
Create a function to initialize the game board upon page load.
Clear all cells.
Set the current player to X.
Reset the game end flag.
Clear the game result display.
4.3. Player Interaction
Set up event listeners for cell clicks.
Only place the current player's mark and update the board state if the clicked cell is empty.
After placing the mark, execute the following:
Call the win/draw check function.
If a winner is not yet determined, switch the player (X to O, O to X).
4.4. Computer AI Logic
Create a function that is called when it is the computer's (O) turn.
Implement a simple logic where the computer randomly selects an empty cell to place its mark. (While difficulty can be increased in the future, random selection is sufficient initially.)
After the computer places its mark, perform the win/draw check, and if the game is not over, switch the turn back to the human player.
4.5. Win/Draw Determination
Create a function that determines the win/draw status based on the current board state.
Check the following winning conditions:
Three rows
Three columns
Two diagonals
If a player meets a winning condition, declare that player the winner.
If all cells are filled and no player meets a winning condition, declare a draw.
If a win or draw is determined, set the game end flag to true and display the "GAME OVER" message and the result.
4.6. Game End Handling
When the game ends (win/loss or draw), prevent further clicks on the cells.
Display the text "GAME OVER" followed by the message "X wins!," "O wins!," or "Draw!" underneath it.
4.7. Reset Functionality
When the "Reset" button is clicked, call the function to return the game to its initial state.
Nhập câu lệnh sau (phiên bản tiếng Nhật)
以下の要件を満たす三目並べ（Tic-Tac-Toe）ゲームを開発してください。HTML、CSS、JavaScriptの各ファイルに分割し、JavaScriptはゲームロジックの大部分を単独で処理するようにしてください。
1. 全体要件
プレイヤーは人間1人、コンピューター1人の対戦形式とする。
ゲーム終了時（勝敗が決まった場合、または引き分けの場合）は、画面上に「GAME OVER」と表示し、勝者の名前（「Xの勝利！」「Oの勝利！」または「引き分け！」）も併記すること。
新しいゲームを開始するための「リセット」ボタンを設けること。
2. HTML (index.html)
基本的なページ構造を作成してください。
ゲームボードは、9つのマス目（セル）で構成されるようにしてください。各セルはクリック可能で、プレイヤーのマーク（XまたはO）が表示されるようにします。
ゲームの状態（現在のプレイヤーのターン、ゲーム結果など）を表示する要素を設けてください。
ゲームをリセットするためのボタンを配置してください。
CSSファイルとJavaScriptファイルを適切にリンクしてください。
3. CSS (style.css)
ゲームボードとマス目が視覚的に分かりやすいようにスタイルを設定してください。
マス目には枠線をつけ、クリック可能な領域であることがわかるようにする。
XとOの表示は、見やすいように適切なフォントサイズと色を設定する。
ゲームの状態表示、および「GAME OVER」メッセージが目立つようにスタイルを設定してください。
レスポンシブデザインを考慮し、様々な画面サイズで適切に表示されるようにしてください。
4. JavaScript (script.js)
JavaScriptファイルがゲームロジックの全てを処理することを強く要請します。
4.1. ゲームの状態管理
ゲームボードの状態を管理する配列またはオブジェクト（例: ['', '', '', '', '', '', '', '', '']）を定義してください。
現在のプレイヤー（XまたはO）を追跡する変数を定義してください。初期値はXとする。
ゲームが終了したかどうか（勝敗が決まったか、引き分けか）を追跡するブール値を定義してください。
4.2. ゲームの初期化
ページ読み込み時にゲームボードを初期化する関数を作成してください。
全てのマス目を空にする。
現在のプレイヤーをXに設定する。
ゲーム終了フラグをリセットする。
ゲーム結果表示をクリアする。
4.3. プレイヤーの操作
マス目をクリックした際のイベントリスナーを設定してください。
クリックされたマス目が空の場合のみ、現在のプレイヤーのマークを配置し、ボードの状態を更新する。
マークを配置した後、以下の処理を実行する。
勝敗判定関数を呼び出す。
勝敗が決まっていない場合、プレイヤーを交代する（XからO、OからXへ）。
4.4. コンピューターの思考ロジック
コンピューター（O）が手番の時に呼び出される関数を作成してください。
コンピューターは、空いているマス目の中からランダムに選択してマークを配置するシンプルなロジックを実装してください。（将来的に難易度を上げることも考慮できるが、最初はランダムで十分です）
コンピューターがマークを配置した後、勝敗判定を行い、勝敗が決まっていない場合はプレイヤーを人間に戻す。
4.5. 勝敗判定
現在のボードの状態に基づいて勝敗を判定する関数を作成してください。
以下の勝利条件をチェックする。
3つの行
3つの列
2つの対角線
勝利条件を満たすプレイヤーがいる場合、そのプレイヤーの勝利とする。
全てのマス目が埋まり、かつ勝利条件を満たすプレイヤーがいない場合、引き分けとする。
勝敗または引き分けが決まった場合、ゲーム終了フラグをtrueに設定し、「GAME OVER」メッセージと結果を表示する。
4.6. ゲーム終了時の処理
ゲームが終了した場合（勝敗が決まったか、引き分けか）は、それ以上マス目をクリックできないようにする。
「GAME OVER」というテキストと、その下に「Xの勝利！」「Oの勝利！」または「引き分け！」というメッセージを表示する。
4.7. リセット機能
「リセット」ボタンがクリックされた際に、ゲームを初期状態に戻す関数を呼び出す。
Khởi động một thiết bị đầu cuối trong cùng một thư mục và khởi động một máy chủ http,
python3 -m http.server 8080
Trong trình duyệt, hãy mở (nhấn CTRL+chuột nếu bạn đang ở trong Cloud Shell):
http://localhost:8080
5. Chạy các tiện ích của Gemini CLI
Gemini CLI cung cấp một số tiện ích rất hữu ích mà bạn có thể dễ dàng cài đặt và chạy. Các tiện ích này cho phép bạn kết nối và sử dụng nhiều dịch vụ. https://geminicli.com/extensions/: danh sách các tiện ích hiện có và danh sách này đang tăng lên mỗi ngày. Để tìm hiểu thêm về Tiện ích của Gemini CLI, hãy tham khảo trang này: https://medium.com/google-cloud/gemini-cli-tutorial-series-part-11-gemini-cli-extensions-69a6f2abb659
Hãy cài đặt tiện ích Gemini Nanobanana và chạy tiện ích đó.
Để cài đặt tiện ích này, hãy chạy lệnh sau.
gemini extensions install https://github.com/gemini-cli-extensions/nanobanana
Sau khi cài đặt tiện ích này, hãy khởi động lại Gemini CLI. Lúc này, bạn có thể chạy các lệnh nanobanana sau đây từ Gemini CLI.
/generate– Tạo một hoặc nhiều hình ảnh có các lựa chọn về kiểu/biến thể/edit– Chỉnh sửa hình ảnh/restore– Khôi phục hình ảnh/icon– Tạo biểu tượng ứng dụng, biểu tượng trang web và các phần tử giao diện người dùng ở nhiều kích thước/pattern– Tạo hoa văn và kết cấu liền mạch cho nền/story– Tạo các hình ảnh tuần tự để kể một câu chuyện hoặc quy trình bằng hình ảnh/diagram– Tạo sơ đồ kỹ thuật, sơ đồ quy trình và bản mô phỏng kiến trúc/nanobanana– Giao diện ngôn ngữ tự nhiên
Hãy chạy một vài lệnh
Trước khi chạy Nanobanana, bạn phải lấy khoá Gemini API từ aistudio.google.com và đặt khoá đó tại đây,
export NANOBANANA_GEMINI_API_KEY=YOUR_API_KEY
Phiên bản tiếng Anh:
# Single image /generate "a watercolor painting of a fox in a snowy forest" # Multiple variations with preview /generate "sunset over mountains" --count=3 --preview # Style variations /generate "mountain landscape" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "coffee shop interior" --variations="lighting,mood" --preview
Phiên bản tiếng Nhật
# Single image /generate "雪の森のキツネの水彩画" # Multiple variations with preview /generate "山にかかる夕焼け" --count=3 --preview # Style variations /generate "山岳風景" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "コーヒーショップのインテリア" --variations="lighting,mood" --preview
Chỉnh sửa hình ảnh
Đổi tên tệp thành tên tệp trên máy tính của bạn.
/edit my_photo.png "change the color of fox to blue"
6. Hoàn chỉnh
Vậy là bạn đã hoàn tất! Chính xác! Để biết thêm thông tin, vui lòng tham khảo các tài nguyên sau.