生成AI-Webアプリの構築

I. 準備

１．エクスプローラに拡張子が表示されるようにしておく（Windowsの場合）

• エクスプローラを開き、上部のメニューバーから「表示」を選択し、プルダウンメニューの「表示」にある「ファイル名拡張子」にチェックを入れる

２．Pythonのインストール（まだインストールしていない場合）

• • Windowsの場合、macOSの場合

３．Visual Studio Codeをインストール（まだインストールしていない場合）して、PythonのExtensionを入れる（まだ入れていない場合）、AIに手伝ってもらえるようにGitHub CopilotのExtensionも入れる

• Windowsの場合、macOSの場合

• Extensionは、VS codeを立ち上げた画面の左端のカラムの上から5番目のExtensionsアイコンをクリックして、現れたExtensionsカラムの最上部の検索窓で「Python」を検索する。検索結果の上位に表示されるMicrosoftのPythonの「Install」ボタンを押してPython Extensionをインストールする。

• GitHub CopilotのExtensionも同様に、「GitHub Copilot」と検索して、インストール。これだけでも最小限AIが使えますが、制限があるので、無制限に使えるようにするためには、学生としてGitHub Educationに応募します。

４．ライブラリのインストール

• Windowの場合

bashと書いた行の下のpipで始まるコマンドは、Windows PowerShellか、「ターミナル」か、Git Bashか、Visual Studio Codeのターミナル などにコピペして実行します；Visual Studio Codeのターミナルは、WindowsとMacで共通に使えます；Windows PowerShellの見つけ方：Wiindowsのスタートボタン→上部の検索窓で「PowerShell」と入力すると見つかる→右クリックして「スタートにピン留め」しておくと今後便利

• macOSの場合

bashと書いた行の下のpipで始まるコマンドは、Macの場合は、「ターミナル」を開いて、コピペして実行します；Macの場合は、まず、次のコマンドで、pipをインストールする必要があります；Visual Studio Codeのターミナルは、WindowsとMacで共通に使えます

python -m ensurepip --upgrade

↑ここやここやここを見て要調査

bash

pip install -q -U google-genai gradio plotly pandas wordcloud matplotlib

↑おそらく、エラーは赤字で、警告は黄色字で表示されるので、赤字が出たら、何とかする必要があります。警告はおそらく当面は対処しなくても大丈夫。ここでエラーが出る場合は、それを生成AIにコピペして尋ねると、解決策を提案してくれる。コピペするのは、エラーメッセージだけでなく、入力したコマンド（上記）も含めて出力全体をコピペするとよい。必要ならその前の文脈として必要そうなコマンドとそれへの応答もいっしょにコピペする。PowerShellの場合だと、私の場合は、「PS C:\Users\okana> ここにコマンドを打つ」という入力形式なので、この行を含めてコピペする。C:\Users\okanaの部分もカレントディレクトリ（今いるディレクトリ）を示すので、ここも情報を持っているのでコピペする。

numpyのインストールが必要な場合は、以下のコマンドでインストール

bash

pip install numpy

以下は各ライブラリの機能の概説：

• google-genai: Googleの生成AI（Gemini APIなど）をPythonから利用するためのライブラリ

• gradio: 機械学習モデルなどに対して簡単にWeb UIを作成するためのライブラリ

• plotly: Webページ上のインタラクティブなグラフ描画用のライブラリ

• pandas: データ操作・解析のためのライブラリ

• wordcloud: 単語の出現頻度をもとにワードクラウド（文字サイズで頻度を表現した画像）を作るライブラリ

• matplotlib: グラフ描画のための基本ライブラリ

５．Google AI Studio（Gemini API） の API キー取得

• • Google アカウントで https://ai.google.dev/gemini-api/docs?hl=ja にアクセス

  • 「Gemini API キーを取得する」→「API キーを作成」→画面に表示される手順でキー文字列を取得

  • ↓取得したキーを環境変数にセット（取得したキーをダブルクォーテーションで囲んで下さい）
    bash
    setx GOOGLE_API_KEY "取得したキー文字列"

↑bashと書いた行の下の setx で始まるコマンドは、Windows PowerShellか、「ターミナル」か、Git Bashか、Visual Studio Codeのターミナル などにコピペして実行します；「取得したキー文字列」をはさむダブルクォーテーションは、そのまま残して、ダブルクォーテーションの間に取得したキーをコピペして下さい。

以上の方法で作成したWebアプリのURLは、ローカルコンピュータで上記のPythonスクリプトを実行している間だけ有効です。このスクリプトの動作を停止したり、ローカルコンピュータをシャットダウンしてもアプリが継続して動作するようにしたい場合は、次の「III. Hugging Face Spaceで公開」に進んで下さい。