dailyrepo
生成 AI のマルチモーダル技術ー「視覚を持った LLM」ができること
https://www.youtube.com/watch?v=q7rYew8cA30
今さら聞けない！ベクトル検索超入門 〜データベース ユーザーは何をおさえておけばいいのか？〜
https://www.youtube.com/watch?v=7XI45ll8fqQ&t=1665s
Vertex AI Jupyter ノートブック チュートリアル
https://cloud.google.com/vertex-ai/docs/tutorials/jupyter-notebooks?hl=ja
ジェネレーティブAI/埋め込み
/イントロテキストエンブベクターサーチ.ipynb
https://github.com/GoogleCloudPlatform/generative-ai/blob/main/embeddings/intro-textemb-vectorsearch.ipynb
○ハイブリッド検索
Vertex AI Searchを使う
↓
Vertex AI PredictionとGoogle Generative AIを混在して使用することは可能
↓
Step1
・(構造化DBなしでの)ハイブリッド検索
・メタ情報でフィルタリングかける
Step2
・DB使う。
★↓まずはここを読む
Vertex AI Search の紹介
https://cloud.google.com/generative-ai-app-builder/docs/enterprise-search-introduction
○API
・Vertex AI Agent Builder API
・
APIs and reference
https://cloud.google.com/generative-ai-app-builder/docs/apis
○一般的に
・RestAPIとクライアントAPIの(少なくとも)２つのアクセスを用意している
＊３つ目として、CLIを用意。
・どのアーキテクチャ、新旧を利用しているかは、
コード的には、import文を見れば分かる？
○クックレシピ
https://github.com/google-gemini/cookbook
○他
VS Code Gemini 拡張機能: https://marketplace.visualstudio.com/items?itemName=wewake.webchatforgemini
VS Code Google Cloud Platform 拡張機能: https://marketplace.visualstudio.com/
Gemini CLI ドキュメント: https://github.com/eliben/gemini-cli
Google Cloud Platform ドキュメント: https://cloud.google.com/docs
○gemini
・Duet AI、Google Workspace、Google Cloud、Google AI Studio
・API キー、サービスアカウント
・Google AI Studioは、Vertex AI Studioの前身となるサービス
→といいつつ、色々、Google AI Studio
・開発環境について
○RAGの性能改善について →ハイブリッド検索
Vertex AI
Embeddings API for Text
Vertex AI Vector Search
Vertex AI Search
データベースとVertex AI
・BigQuery
・AlloyDB for PostgresSQL
・Cloud Spanner
○複数コンテナ化？
・もともと、docker-compose.ymlは複数コンテナ用
・WSGIとは何か
・webサーバーとして、NginxがAppachをシェア的に超えている
・同時多発アクセスに強いため
・appサーバーとしては、pythonの場合？、gunicomがいい
・gunicom単体でも動作する
・gunicomはlinux用→コンテナで使ってみる
・なんとか、コンテナ化、動作させる
・Nginxもコンテナイメージをダウンロードして利用しようとしたが
・イメージは、runさせて、viで編集する感じ。
・面倒なので、断念
・Nginxはwindowsもある？？？
★○開発環境に関して
・ソースは、イメージから抜き取れるので、取り敢えずは、神経質にならない
・webサーバーは、本番環境と同じでいい？
・ベクトルDBや（使っていればsql）DBは、開発用を立てる？
○Cloud RunでCSRF検証エラー
やはり、
★cloud run northtokyo1 だとうまくいく？？？★
だった。
何との関係？？？
★予定のプロジェクトだと動作しているものが前提なので
★おいおい調査。。。→★★同一リージョン？？？
○○使用されているWeb frameworkの見極め
○django
settings.py etc
○FastAPI
FastAPI入門
https://zenn.dev/sh0nk/books/537bb028709ab9
*api/main.py
from fastapi import FastAPI
app = FastAPI()
○Flask
*apps/app.py
from flask import Flask, render_template
app = Flask(name)
○React
import React from ‘react’;
import ReactDOM from ‘react-dom’;
○FastAPI本
https://zenn.dev/topics/fastapi?tab=books
○App Engine と Cloud Run
*併存は基本的にない模様
*Cloud Runがお勧め App Engineの知見を元に作られているらしい・・・
App Engine VS Cloud Run
https://zenn.dev/sinmetal/articles/appengine-vs-cloudrun
App Engine と Cloud Run の比較
https://cloud.google.com/appengine/migration-center/run/compare-gae-with-run?hl=ja
○Cloud RunでCSRF検証エラー
・下記にて解決
django CSRF_TRUSTED_ORIGINS not working as expected
https://stackoverflow.com/questions/70508568/django-csrf-trusted-origins-not-working-as-expected
意外と言えば意外な解決方法だった
後から考えてみると、djnago4から というのがミソ
今回は、chatgptとbingも役に立たなかった
ググル（検索する）と、他の解決法が、上の方に出て来るからで、
生成AIもそちらに、依存しているからであろう。
★cloud run northtokyo1 だとうまくいく？？？★
★最新(etc)のバージョンに関すること、新機能★などは、
マニュアルを読むしかないのが基本
＊及び、それに対応した解決方法
★エラーが起きた時は、（場合により）
ある程度１～２時間ぐらいかけて検索して、対応方法をリストアップした方が
いいかもしれない★
○ライブラリ
★cdn とダウンロード
○django_bootstrap5 の反映
★★★スタイルシートの反映
★★★何故か、開発者ツールを表示しながらやるとうまくいく・・・。
○ドットインストール
・CSS入門 基本スタイリング編(27回)メモをとり回ながら
(・CSS入門 応用スタイリング編(27回)) 後回し
・CSS入門 セレクター編(～21) 9回まで
・CSS入門 フレックスボックス編(22回) ざっと 後で
★コンテナとなるクラスに、cssで、display flex指定する。。
・CSS入門 メディアクエリー編(14回) ざっと
★[フレックスボックス、メディアクエリー]折り返しは、calcで計算する必要
あり？だとしたら、bootstrapが基本？？？
・Bootstrap 5入門(21回) ざっと
★javascript cssを一切（自分では）書かないで構築
★大雑把なレイアウトはBootStrap 細かなとこはFlexboxを使う場合もあり
★(定義されている)classを指定していく記述方法
★Gridrayaout 要調査
●配属予定の案件準備
○昨日のエラー原因
・コンテナはlinuxで動いていて、linuxは、ファイル名の大文字小文字を区分ける。
＊windowsはしない。
・対策としては、ファイル名と、views.pyでの呼出しを合わせる。
★大文字・小文字
・renderする際には、大文字小文字を実際のファイル名と併せる必要がある
例：return render(request, ‘pmchoice.html’, @views.py
・Django の redirect 関数は URL 名を指定して使用するため、テンプレートファイル名の大文字小文字の問題とは直接関連がありません。redirect 関数は主に URLconf で定義された URL 名に基づいてリダイレクトを行います。そのため、redirect を使用する際には、URL 名が大文字や小文字に対してどのように定義されているかを確認することが重要です。
例：return redirect(‘PMChoice’)
○Artifact Registry ← Container Registry
・新しいArtifact Registryを使う。
・gcr.ioは、Container Registryを意味する
・どちらを使うかで手順と書式が若干違う *或いは元々違う書式を使っていた。
①プロジェクトはどちらも先に作る
②ARは、リポジトリを先に作る。CRは作らなくていい,push時に自動的に作る?。
③push書式、ARは、[HOST-NAME/PROJECT-ID/REPOSITORY/IMAGE]最後のIMAGEを忘れない。
○Docker設定ファイル
・C:\Users\ユーザー名.docker\config.json にある。
・新規にホスト(リージョン?)を使う場合には、ここに付加する必要がある
コマンド：gcloud auth configure-docker asia-northeast1-docker.pkg.dev
↓
設定ファイルに付加： “asia-northeast1-docker.pkg.dev”: “gcloud”
○イメージからソースファイルの抜き出しに関して(by Copilot)
・Dockerイメージは読み取り専用であり、直接中を見ることはできません。
・しかし、そのイメージからコンテナを作成することで、イメージの内容を操作できる環境を得ることができます。
・コンテナから特定のファイルをホストマシンにコピーします。以下のコマンドを使用します
●配属予定の案件準備
〇アサイン後やること
1.)アーキテクト調査
・Google App Engine を使っているか？
＊恐らく使っていない？？？
使っている場合には、ソース管理も、GAEで兼用でいないかの調査。
2.)ローカルでの開発環境作り
・GAE以外の場合？
・GAEの場合には、別途、どのような開発環境を作るか検討する。
3.)ソース管理方針決め
①Git(SoureTree)管理
・GitHub Actions を使用して Cloud Run にデプロイする ←今回は１カ月では無理？
②クラウド上のコンテナが、履歴を持つならば、そこでソース管理を兼用できないか？
★コンテナ(イメージ)から、ソースを取得できることが前提。
・Artifact Registry
・Cloud Run
*コマンド1発でデプロイするパターン – gcloud run deploy
〇(予想通り)GCPへのデプロイではまった・・・。が、シンプルプログラムは何とか動作。
・先ずは、オーソドックスにエラーメッセージを読み解いてい見る。
・portエラーリングに関しては、
●ローカル編
①ALLOWED_HOSTS = [‘*’]
②python manage.py runserver 0.0.0.0:8000
③ブラウザからは、「http://localhost:8000/」でアクセス
●デプロイ編
①(もしかしたらappchなどは、デフォルトで自動起動かもしれないが)★★ここ確認
djangoの開発サーバーの場合には、明示的に起動してやる必要がある
②runserveの記述は、Dockerfileに書かないと駄目？★compose.ymlでは駄目？
③composeには、ホストとコンテナのポートのリンクを書く。
★Google App Engine（GAE）の利用はあり？
Google App Engine（GAE）とは 概要や機能、活用事例を5分で入門
https://cloud-ace.jp/column/detail251/
・ローカルで実行、デプロイ
・バージョン管理？
・「スタンダード環境」(仮想環境)と「フレキシブル環境」(Docker コンテナ)
★★ローカルでコンテナ化し、ローカルで動作確認
①ALLOWED_HOSTS = [‘*’]
②python manage.py runserver 0.0.0.0:8000
③ブラウザからは、「http://localhost:8000/」でアクセス
★コンテナ作成後に、通常のエディタで、編集したが、大丈夫そう？？？
★一般に、server毎(Web、DB、App)に、コンテナを作成
★docker-composeを利用して連携させる。
★★一般的に★★
★Docker内のファイルだが、既存イメージから、コンテナ内からファイル編集することも出来るが、
あくまで緊急用。一般にやらない。
★★hostのフォルダを、docker起動時にマウントできる！★★
★★より、↓下記、時間省エネ化可能？？？★★
★開発手順①
①git(master)上で、ソースを最新の状態にする。
②ローカルにpullして、動作確認。
③コンテナ化して、イメージして、アップロード。
(④動作確認)
★開発手順②
①git(master)上で、ソースを最新の状態にする。
②(コンテナ使用しないで)webサーバーをたて、①をpull
③動作確認して、(Dockerfile)②をコピーして、コンテナ化。
(④動作確認)
★github ★private★で
★gitベースのソース管理
コマンドベース(GitCmd)
GUIベース
VSCode
SourceTree ←多い
★最初の１か月は、masterにどんどんpush
*ブランチは使わなくてもＯＫ？
*フォルダ管理方式とさして変わらない？
★概略手順
①GitHubアカウントの作成 リモートリポジトリの作成
②クライアント側ツール インストール
③①と②の連携
・(ブラウザ)github リポジトリ作成
・(sourcetree) createメニュー
・(sourcetree) リモート設定
・(sourcetree) コメントを入れてコミット
・(sourcetree) プッシュ
★SourceTreeインストール 時
bitbucketserver bitbucket
*bitbucket でOK
*ツールは(エラーが出たので、取り敢えず)インストールしない
★メモ
vscodeは使いずらそう？
多くのプロジェクトで使われている(専用の)SourceTreeで。
1.)下記３点より、「これからはじめるVue.js 3実践入門 / 山田 祥寛」
①ルーティング
②コンポーネントとして(のUI)
③レイアウト調整(リスポンシブル)
2.)「これからはじめるVue.js 3実践入門 / 山田 祥寛」
・107,110, スタイルプロパティ、スタイルクラス
・138～ コンポーネント
・163, コンポーネント間をまたがるデータ
・Vue.jsでグローバル変数を使う方法【現役エンジニアが解説】
https://note.com/sweller/n/na8d7d12eb8b9
・244 新規法 Composition API
・282 コンポーネントライブラリ ElementsPLus
・352 公式ライブラリ VueRouter
・394 Vuex データ集中管理ライブラリ
・Vuetifyでレスポンシブデザイン コンポーネントライブラリ グリッドシステムあり
3.)リスポンシブルデザイン
基本
・media query [どのメディアにCSSを適用させるか]
・flex box グリッド方式
[React]に関しては、リスポンシブル対応させるために、様々なライブラリがある。
が、[React native]に関しては、flexbox をそのまま使う？？？
https://zenn.dev/nabeliwo/articles/89099b39223eca
4.)ルーティング + UI(コンポーネントライブラリ) + リスポンシブル対応
UIライブラリが、グリッド方式を兼ね備えているものが楽か・・・
★Vue + Vuetify + VueRouter (+Vuex)
★React + Next.js + MUI
5.)React vs Vue
・手軽さが売りのVueだが、Composition APIを使って、カチッとやろうとすると、
それなりに学習コストがかかる
・また、データ管理などは、Vuex(外部ライブラリ)がある様に、発展途上であるように感じる
・上記２点より、カチッとやるなら、Reactでいいのではないか？
★but
・Vueの売りの１つに、「段階的な成長」に対応できる、というのがある。
・さらっと、サンプルアプリを作るなら、Vueでいいかもしれない。
★webフレームワークを学ぶ上で
・フォルダ構成とurlの関係*基本的にはパラレル
・ルーティングの仕組み
・上記、設定ファイル
★フロントエンド
・UIに関して、どのライブラリを使用するか
・レイアウト調整(リスポンシブル)にどのライブラリを使用するか
〇MUI
・UI 基本的なものは無償で利用できる
・レイアウト機能（グリッド方式）もある
〇jsとtsx
・styled-componentsは、tsxに直接「書けてる」感じだが
・そもそもtsxは、jsの上位互換なので、つまりは、MUIも同じような感じ？
〇「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 / 手島 拓也etc」
★Next最新の構成だと、pagesフォルダがなくなる・・・。↓その辺の話。
https://qiita.com/mu_tomoya/items/7545bea039e82e483f9e
Follow me!
