Category: 未分類

前準備: harvester GUIでの設定 ログイン設定 後々にVMを作った際にユーザー名とパスワードを決めておかないとログインできません。そこでCloud configuration templeteにVMの情報のテンプレートを作っておきます。また、SSHでアクセスするための設定もここに書いておきます。大体こんな感じで書けば良いです。(調整に丸一日費やした)。また、画像は割愛しますが、AdvancedのSSH keysにも同じ内容の公開鍵を登録しておきます。 VMからGPUへアクセスするための設定 AdvancedのPCI Devicesには様々なPCI接続されたデバイスがあります。このうちNvidiaで検索して引っかかったものをかたっぱしからEnabledに変更すると良いでしょう。これをやっておかないとVMを作った後に苦しみます。 ネットワークの設定 後々にSSHでアクセスするためには静的にアドレスを振っておくと都合が良いです。左側のNetworksからVirtual Machine Networksを選択してCreateを押し, Basicsを以下のようにしましょう。またRouteでは静的なアドレスとGatewayを指定します。 VM用imageファイルを取得する VMを作るには, その元となるイメージが必要です。AWSでもUbuntuだったりAmazon Linuxだったりが選べますが, 自作する場合でも同じです。ここで必要になるのはUbuntuのイメージファイルなのですが, 公式のUbuntu24.04などはVM用に最適化されておらず, 起動後に複雑な設定が必要になります。しかも, うまく動かないこともザラです。そこで, cloudに最適化されたUbuntu imageを使用します (https://cloud-images.ubuntu.com/releases/22.04/release/ubuntu-22.04-server-cloudimg-amd64.img)。 harvesterのGUIからimage->createと進んで, URLを記入してください。これでcreateすれば, GUI側でイメージをDLして使用できるようにしてくれます。…

こんにちは。RockinWoolです。前回の続きということで、今回はFrontendのjavascriptとbackendのpythonを同期させて行こうと思います。それでは早速はじめていきましょう。 Flaskのインストールとサーバのセットアップ それではまず、backend環境を作るためにFlaskをインストールしていきます。自分はanaconda環境でやっているのでcondaで入れていきます。 新しいフォルダ構成でアプリを再構築する 前回のcreate-react-appでのReactアプリの構築では、最新のnodejsをビルドできないことが判明したのでビルドツールをviteに変更します。新しくmaze_gameという親フォルダを作ってその中に移動したら次のコマンドでViteプロジェクトを作ります。 ここまででViteサンプルアプリが動くようになります。 迷路側(frontend)の作成 index.html まずはindex.htmlから順番に作っていきます。Viteになったことで最初に起動させるエントリーポイントJavascriptのファイルがmain.jsxになっています。今回も慣例にしたがってmain.jsxを起動させるようにします。 main.jsx エントリーポイントです。ここではReactの初期設定を行い、アプリケーション全体をブラウザにレンダリングします。 2行目のReactDOMとはなんぞや？と思って調べてみたら、DOM(Document Object Model)という概念についてChatGPTが教えてくれました。Reactはhtmlの要素(Node)を動的に変更することで画面を変化させているということを知らなかったので、DOMによってNodeの塊として表現されているhtmlを変化させるためにReactDOMが必要なんだと理解することができました。3行目はルートコンポーネントであるApp.jsxをインポートすることを宣言しているそうですが、拡張子抜きで宣言するのに違和感があります。6行目ではレンダリング対象を宣言していますが、index.htmlで<div id=”root”></div>と宣言したroot要素を対象にすると言っています。<React.StrictMode>は開発モード機能であると宣言しているので、本番ビルドでは対象ではないと言っています。App /はAppをレンダリングするということらしいですので、次はApp.jsxについて見ていきます。 App.jsx 実態はcomponent/Maze.jsxに記述しているので、これは単純に仲介役を果たすファイルです。 最後のexport default App;でfunction App()を他のjsxから呼び出せるようにしています。 component/Maze.jsx 今回の開発で最もキモとなった部分の1つです。前回はここに迷宮情報を格納して迷路を作っていましたが、backend側に迷宮情報を持たさたほうが良いと判断して、frontend起動時にサーバから迷路情報を取得するように変更しました。そして、Enterを押したら自動で決められた動きをするように変更しています。 backend/server.py 最後にbackend側の実装を行っていきます。backend側は迷宮情報を渡すmaze関数と自動移動を行うmavoe関数を実装します。 vite.config.js Viteで起動したときに通信をどうするかを定義します。 ここまでで一通り動くものが作れました。いやーコードばっかりになってしまい申し訳無いです。次回はコードの詳しい解説と自動移動関数の強化学習を目標にしようと思います。それではまた次回！

こんにちはRockinWoolです。最近は頭痛も落ち着いていろいろなことに打ち込めるようになってきました。人生山あり谷ありですが、今は山なんだなあと感じています。さて、今日からはPythonを使ったブラウザアプリを作って行こうと思います。まずはアプリの構成ですが、ChatGPTに質問したら以下のような回答が帰ってきました。 なるほどなるほど。それでは今回はReact.jsを使用してフロントエンドを作って、バックエンドはFlaskという構成でやっていこうと思います。 node.jsのインストール React.jsのインストールをするためには、前提としてnodejsのインストールが必要とのことでした。なので、nodejsを入れていこうと思います。今回の環境はUbuntu20.04です。まずは以下のコマンドを実行します。 ここまで実行すればnodeコマンドやnpmコマンドが実行できるようになると別のサイトには書いてあったのですが、自分の環境では以下のエラーが出ました。 第一感では、このエラーはPATHの通っていないところにnodeがインストールされた結果発生しているのでは無いかと考えられました。なので、地道にPATHが充分か調査してみます。 このコマンドでnodeが存在していることは確定しました。次はnodeのinstallに使ったnの位置です。 こちらにもnodeがいることがわかります。ただし、こちらにある方が本物です。というのもsudo apt install nodejsでインストールできるnodeはversion10と非常に古いのでnコマンド経由で22.12.0をインストールするようにしたのが最初のコマンド群でした。ということで、こちらをPATHに追加していきます。以下のコマンドを.bashrcとターミナルの両方に打ち込んでPATHを登録します。 プロジェクトの作成 React.jsを使ったアプリの作成は以下のコマンドで実行します。 ここで–forceオプションをつけるのはreactのバージョンによってはうまく行かない依存関係が発生してしまうためです。このアプリの名前はmaze_gameとしました。迷路ゲームを作ろうと思っているので。さて、ここで`cd maze_game`してnpm startでアプリを起動！のつもりがまだ依存が解決していないとかで怒られました。私の場合は以下のコマンドで解決できました。 迷路部分の実装 ここから先はあまり詳しくはないので、いろいろ調査しながら作りました。まずnpm startを実行した際の挙動としては というステップを踏んでいます。したがってApp.jsに具体的にフロントエンドで実装したいことを書いていきます。ただし、直接App.jsに書くとsrcディレクトリの中が汚れそうだったのでsrc/componentsディレクトリを作って、その中にMaze.jsという本体を書いていくことにしました。したがってApp.jsとMaze.jsの中身はこんな感じになります。 App.js Maze.js App.jsはMaze.jsを呼び出しているだけなので、今回はそんなに重要ではないです。本題となるのはMaze.jsの方で、ここには大きく分けて3つの要素が含まれています。 迷宮の地図 キーボードを入力した際の動き 最初は1.1の座標からスタートすることを言っています。handleKeyDownはキーボード入力を拾っています。それからplayerPosを直接更新することはせずに一回tempとしてnewPosを定義しています。let newPos = の部分がそれで、playerPos=newPosとするとplayerPos=2としたときにnewPosも2になってしまう問題があるため、PlayerPosの中身(..playerPos)を配列で囲むことによって同じ配列を作っています。後は入力e.keyの種類によってx,yを更新してPlayerPosに入れています。 迷路とプレイヤーの描画…

2021/05/08こんにちは。RockinWoolです。最近外付けHDDの挙動がおかしかったので、もう一つ買ってきました。これで完璧。さて、今回はGRPC! と行きたいところです。ただ、そもそものC++周りの知識が全然無かったので、ひたすらそれを書いていこうかなという感じです。 まずは今回の目的であるgRPCの導入と、gRPCを使用する際に必要になるprotobufが使えるようにならないといけない。なので、そのあたりの環境構築からはじめる.参考2最初にcmakeのインストールを行う 次にgRPCのインストールを行う。まずはパス通しから .~bashrcにも追記する そして関連ツールのインストール そしてgRPCをクローンしてきてひたすらmakeする.ただし普通にビルドするとPCに負荷がかかり過ぎてフリーズすることがあった。そのため、cgroupで制約を課しながら、システムに余裕を持たせて実行すると良い。\ cgroup-toolsをインストールしたら、/etc/cgconfig.confを作成して、以下のように入力する 最後に設定を反映させたターミナルを起動する ターミナルが起動したら作業ディレクトリまで移動したのち、以下のコマンドを実行してビルドを行う 最後になぜかパーミッションがおかしい.pcファイルたちを移動しつつ権限を変更する それとPKG＿CONFIG＿PATHを指定しておかないと.pcファイルを読んでくれないので、これも指定する いちおうbashrcにも書いておく。 ここまでで、ようやくgrpcの作成環境が整えることができた。次はプログラミングである。ディレクトリ構成を以下のようにする このprotoディレクトリ内にrandom_walker.protoを用意する これを以下のコマンドでcppとhに変換する これで生成されるproto/random_walker.grpc.pb.hを見ると、134-140行目に関数の定義がされている