14,096 文字
ほんでな、OpenAI o1を使うて何でも作る方法をお教えしますわ。これは OpenAIの新しいAIモデルで、今まで見たことないようなもんやねん。GPT-4と比べたらこんな感じや。つまり、めっちゃパワフルなんや。それも Chain of Thoughtのおかげやね。
ほら、この例を見てみ。これがGPT-4で、こっちがo1のプレビューや。プロンプトは同じやけど、レスポンスは全然違うんや。新しいモデルは考えるのにトークンを使うてんねん。これ全部がモデルの推論過程で、レスポンスの前に考えてるんや。
今日は、これを使うて基本的に何でも作る方法を教えるで。ウェブアプリからAIエージェントまで、普通なら何日も何週間もかかるようなもんを、数分で作れるんや。
一番ええとこは、この新しいo1モデルがもうChatGPTで使えるってことや。ただし、ChatGPT Plusの契約が要るけどな。月20ドルかかるわ。
「デイビッド、それ本当に価値あるんか？」って思うてるやろ？答えは絶対にイエスや。この新しいモデルは今まで見たことないようなもんや。間違いなく一番優秀なAIモデルやで。
ほな、見せたろか。インタラクティブなニューラルネットワークの可視化ツールを作ってくれって頼んでみるわ。ワイ自身じゃ絶対作れへんわ。見てや、送信したら即座に返事くれへんのや。考え始めるんや。普通は数秒から20秒くらいかかるけど、今回は8秒で済んだわ。正直、ちょっと早かったな。
人々はこういうツールの開発に金払うてるんや。例えば、ここに1000ドルのAIツールがあるやろ。ここには700ドルのがある。今や、o1のパワーを使えば簡単にこういうの作れるんや。AIで金稼ぐのがこれほど簡単になったことはないで。
ほら、新しい社会のメンバーのラモンを見てみ。2日前にAI画像を売って400ドル稼いだんや。AIで真剣に金稼ぎたいんなら、新しい社会に参加するのを忘れんといてな。説明欄の一番上のリンクや。
ほな、前提条件を示すで。プログラミングスキルがどれだけあるかに関係なく、こういうプロジェクトを作れる方法を教えるわ。Upworkで、こういうツールの存在を知らん人や使い方を知らん人から出されてる仕事を、簡単に請け負えるようになるんや。
ほな、コンテキストのために…そして、計画をアップデートするように言うてみるわ。
もちろん、最初のプロンプトで全部やる必要はないけど、簡単な質問はせんほうがええで。週に30メッセージしか使えへんからな。そうや、週やで。プロンプトの90%はGPT-4 MiniかCLaude 3.5 Sonnetに向けるべきや。でも、高度なことが必要なら、o1を使うべきや。めっちゃ優秀やからな。
ほら見てや、48秒も考えてから答えくれたんや。モデルが48秒も考えてから答えを出すのを見るのは本当にすごいことや。実際にクリックして、何をしてたんか見ることもできるんや。ニューラルネットワークの可視化をデザインしたり、スキルをマッピングしたり、指示を見直したり、オプションを検討したり、プロセスをマッピングしたり、インストールを確認したりしてたんや。まあ、すごいもんやわ。
メッセージの制限が低いから、制限なしでこのモデルを使う方法を見つけることにしたんや。多分一番簡単なのはOpen Routerを通すことやな。これは色んなAIモデルとチャットできるAIツールや。サードパーティのツールを使う必要があるのは、APIを通して直接使おうとすると、「使用層5を持ってへん」ってでっかい赤いメッセージが出るからや。使用層5を得るには、OpenAIに少なくとも11,000ドル使う必要があるんや。
ほな、Open Routerに行って、アカウントを作って、クレジットに3ドルか5ドルくらいチャージしてな。それからチャットをクリックして、ここでモデルを選べるんや。o1プレビューを選んで、チャットできるけど、OpenAIが我々に与えるような任意の数字で制限されへんのや。
ほな、戻って更新された計画を見てみよか。前提条件が更新されてるな。基本的なコンピュータースキル…まあ、みんな持ってるやろ。学ぶ意欲…これ超大事やで。ウェブ開発の基本概念を学ぶ気があること、そしてインターネットアクセス…ほな、これら3つあれば、基本的に何でも作れるんや。マジで、2024年にAIで金稼ぐのに必要な唯一の条件やで。
ほな、ステップ1、必要なソフトウェアをインストールしよか。Node.jsとnpmをインストールするんや。Node.jsを公式ウェブサイトからダウンロードしよか。WindowsのNode.jsの現在のバージョンが欲しいから、LTSサポートバージョンをクリックするんや。
ほな、実際にそうしよか。LTSバージョンをクリックして、ダウンロードして、インストーラーを実行するんや。見てのとおり、o1が言うた指示通りにやってるだけや。天才である必要もないし、上級プログラマーである必要もない。オープンな心と学ぶ意欲があれば、これができるんや。このツールを使って何でも作れるんや。
ライセンスに同意して…もしすでにNode.jsを持ってたら、このステップは飛ばしてええで。でも、ワイはウェブ開発者やないから、インストールする必要があるんや。でも幸いなことに、o1のおかげで超簡単や。まるで子供に教えるみたいに指示をくれるからな。
ワイの最初のプロンプトは多分不十分やったな。十分なコンテキストを与えへんかったし、ワイのバックグラウンドも言わへんかった。ただ「プロセスの各ステップを実装するための明確な指示をくれ」って言うただけや。プロンプトはもっとよくできたはずや。指示を含めたり、ワイの能力レベルの情報を含めたりできたはずや。
ワイはHTML、CSS、JavaScriptをちょっと知ってるから、そう言えたかもしれへん。でも、誰でも従えるように、できるだけシンプルにしたかったんや。だから、そういう風に更新したんや。
これらの出力は超長いから、次のメッセージに簡単に行けるような方法があればええのにな。下ボタンじゃなくて、次のメッセージに飛ぶようなもんや。それは追加する必要があるな。o1は非常に徹底的で、必要なもの全部くれるんや。少なくとも他のAIモデルに比べたら怠け者やないし、絶対にステップを飛ばしたりせえへんで。
ほな、インストールを終わらせよか。インストーラーを実行して…デフォルトオプションを受け入れて…インストールを確認しよか。コマンドプロンプトを開いて、WindowsキーとRを押してcmdって入力するんや。そして、テストしてみよか。node -vって入力すると…よっしゃ、バージョンが表示されたな。インストールできてるってことや。npm -vも同じや。インストールできてるな。
Node.jsとnpmという2つの前提条件がインストールできたわけや。ええぞ、ええぞ。
次は、CursorIDEをインストールしよか。ワイはもうやっとるけど、まだの人はワイの動画を見てな。学習リソースまで提供してくれてるわ。今はスキップするけど、この動画はo1で何でも作る方法についてやからな。学ぶ方法じゃない。でも、それも素晴らしい使い方やで。
どんなスキルでも、詳細な学習プランを作るようにo1に言えるんや。JavaScriptでもTypeScriptでもPythonでも新しい言語でも、何でもええ。昔のモデルは、こういう推論能力がなかったから、簡単なプランしか出せへんかったんや。それで、もっとフィードバックをあげて、何回もプロンプトを出して改善してもらう必要があったんや。
でも、o1なら、お前の要件、好みの学習スタイル、レベル、使える金額、使いたい金額、何でも言うたら、それに合わせて正確な学習プランを作ってくれるんや。ステップバイステップで、30日間の各日が明確に示されたプランをな。
ほな、これらをスキップして…開発環境のセットアップに行こか。新しいReactプロジェクトを作るで。create-react-appを使うてプロジェクトをセットアップするんや。コマンドプロンプトを開いて、プロジェクトを作りたいディレクトリに移動するんや。
場所を見つけるには、フォルダーを右クリックしてプロパティを選んで、この場所をコピーするんや。でも実際、正確に何をすべきか教えてくれるべきやったな。
ほな、もう一回プロンプトを開こか。実際、Anacondaプロンプトを使うてもええし、どのターミナルを使うてもええんや。MacOS、Windows、Linuxでも全部動くで。
cdコマンドを使って、この場所に移動するんや。このコマンドを知らんかったら、o1に聞いてもええけど、たぶんこんな簡単なことにはo1を使わんほうがええな。Claude 3.5 Sonnetとか普通のChatGPTでも簡単に教えてくれるようなことやからな。ディレクトリの場所を見つけたり、プロジェクトを作る場所に移動したりするような簡単なコマンドに、o1のメッセージを無駄遣いせんほうがええで。
でも同時に、絶対にモデルで遊んでみてな。メッセージ制限を見つめて、「あかん、週30メッセージ使いきってまう」って数えたりせんでええで。心配せんでも、Open Routerの方法があるから、数ドルチャージすれば好きなだけ使えるんや。
とにかく、話を戻そか。ディレクトリに入ったから、これをコピーしよか。create-react-app…正直、Reactとかについて何も知らんのや。だから、言われた通りにするだけや。
エラーが出たな…実はちょっとミスったわ。Cursor内のターミナルを使うべきやったな。AIモデルを使って助けてもらえるからな。ほな、新しいターミナルを作ろか。もうフォルダーにいるから…これが多分一番簡単な方法や。CursorでOpen Folderを使ってフォルダーを開いて、そのフォルダー内にターミナルを作るんや。そうすれば、場所を見つける面倒なことをせんでもええんや。
ほな、このコマンドを正確にコピーしよか。プロジェクトを作りたいディレクトリにいるはずや。Cursorでopen folderを使ってフォルダーを開いたからな。これを実行しよか。エラーが出るはずや。
ほな、AIでデバッグしよか。チャットに追加して、「なんでこのエラーが出るんや？どう直したらええんや？」って聞こか。ちなみに、Cursorは次の24時間から48時間以内にo1を追加すると思うで。プログラミングやコードのリファクタリング、エラー解決、複雑なコンテキストの理解に最高やからな。
でも、メッセージ制限は小さくなると思うで。このモデルは高価やからな。GPT-4の3〜4倍くらいの価格やで。だから、これらのサービスが無制限のメッセージを追加するとは思わんほうがええで。そんなことは起こらへんで。
ほな、もう一回やってみよか。ターミナルで…
次のパッケージをインストールする必要があるみたいやな。ほな、新しいReactアプリを作るで。
エラーを解決できたみたいやな。もう一度言うけど、ワイはReact、Node.js、TypeScript、JavaScript、ウェブ開発について全く経験がないんや。これらのAIツールを使えば何かを作れるって自信と、なんとかしてやろうっていう意欲だけや。正直、このプロジェクトに関してはそれだけで十分やねん。
ほな、次のステップに進もか。必要なソフトウェアをインストールして…Node.jsとnpmをインストールしたな。現在のNode.jsバージョンをWindows用にダウンロードしたいから、LTSサポートバージョンをクリックするんや。
よし、実際にやってみよか。LTSバージョンをクリックして、ダウンロードして、インストーラーを実行するんや。見ての通り、o1の指示通りにやってるだけやで。天才である必要も、上級プログラマーである必要もない。オープンな心と学ぶ意欲があれば、これができるんや。このツールを使って何でも作れるんや。
ライセンスに同意して…もしすでにNode.jsを持ってたら、このステップは飛ばしてええで。でも、ワイはウェブ開発者やないから、インストールする必要があるんや。でも幸いなことに、o1のおかげで超簡単や。まるで子供に教えるみたいに指示をくれるからな。
ワイの最初のプロンプトは多分不十分やったな。十分なコンテキストを与えへんかったし、ワイのバックグラウンドも言わへんかった。ただ「プロセスの各ステップを実装するための明確な指示をくれ」って言うただけや。プロンプトはもっとよくできたはずや。指示を含めたり、ワイの能力レベルの情報を含めたりできたはずや。
ワイはHTML、CSS、JavaScriptをちょっと知ってるから、そう言えたかもしれへん。でも、誰でも従えるように、できるだけシンプルにしたかったんや。だから、そういう風に更新したんや。
これらの出力は超長いから、次のメッセージに簡単に行けるような方法があればええのにな。下ボタンじゃなくて、次のメッセージに飛ぶようなもんや。それは追加する必要があるな。o1は非常に徹底的で、必要なもの全部くれるんや。少なくとも他のAIモデルに比べたら怠け者やないし、絶対にステップを飛ばしたりせえへんで。
ほな、インストールを終わらせよか。インストーラーを実行して…デフォルトオプションを受け入れて…インストールを確認しよか。コマンドプロンプトを開いて、WindowsキーとRを押してcmdって入力するんや。そして、テストしてみよか。node -vって入力すると…よっしゃ、バージョンが表示されたな。インストールできてるってことや。npm -vも同じや。インストールできてるな。
Node.jsとnpmという2つの前提条件がインストールできたわけや。ええぞ、ええぞ。
次は、CursorIDEをインストールしよか。ワイはもうやっとるけど、まだの人はワイの動画を見てな。学習リソースまで提供してくれてるわ。今はスキップするけど、この動画はo1で何でも作る方法についてやからな。学ぶ方法じゃない。でも、それも素晴らしい使い方やで。
どんなスキルでも、詳細な学習プランを作るようにo1に言えるんや。JavaScriptでもTypeScriptでもPythonでも新しい言語でも、何でもええ。昔のモデルは、こういう推論能力がなかったから、簡単なプランしか出せへんかったんや。それで、もっとフィードバックをあげて、何回もプロンプトを出して改善してもらう必要があったんや。
でも、o1なら、お前の要件、好みの学習スタイル、レベル、使える金額、使いたい金額、何でも言うたら、それに合わせて正確な学習プランを作ってくれるんや。ステップバイステップで、30日間の各日が明確に示されたプランをな。
ほな、これらをスキップして…開発環境のセットアップに行こか。新しいReactプロジェクトを作るで。create-react-appを使うてプロジェクトをセットアップするんや。コマンドプロンプトを開いて、プロジェクトを作りたいディレクトリに移動するんや。
場所を見つけるには、フォルダーを右クリックしてプロパティを選んで、この場所をコピーするんや。でも実際、正確に何をすべきか教えてくれるべきやったな。
ほな、もう一回プロンプトを開こか。実際、Anacondaプロンプトを使うてもええし、どのターミナルを使うてもええんや。MacOS、Windows、Linuxでも全部動くで。
cdコマンドを使って、この場所に移動するんや。このコマンドを知らんかったら、o1に聞いてもええけど、たぶんこんな簡単なことにはo1を使わんほうがええな。Claude 3.5 Sonnetとか普通のChatGPTでも簡単に教えてくれるようなことやからな。ディレクトリの場所を見つけたり、プロジェクトを作る場所に移動したりするような簡単なコマンドに、o1のメッセージを無駄遣いせんほうがええで。
でも同時に、絶対にモデルで遊んでみてな。メッセージ制限を見つめて、「あかん、週30メッセージ使いきってまう」って数えたりせんでええで。心配せんでも、Open Routerの方法があるから、数ドルチャージすれば好きなだけ使えるんや。
とにかく、話を戻そか。ディレクトリに入ったから、これをコピーしよか。create-react-app…正直、Reactとかについて何も知らんのや。だから、言われた通りにするだけや。
エラーが出たな…実はちょっとミスったわ。Cursor内のターミナルを使うべきやったな。AIモデルを使って助けてもらえるからな。ほな、新しいターミナルを作ろか。もうフォルダーにいるから…これが多分一番簡単な方法や。CursorでOpen Folderを使ってフォルダーを開いて、そのフォルダー内にターミナルを作るんや。そうすれば、場所を見つける面倒なことをせんでもええんや。
ほな、このコマンドを正確にコピーしよか。プロジェクトを作りたいディレクトリにいるはずや。Cursorでopen folderを使ってフォルダーを開いたからな。これを実行しよか。エラーが出るはずや。
ほな、AIでデバッグしよか。チャットに追加して、「なんでこのエラーが出るんや？どう直したらええんや？」って聞こか。ちなみに、Cursorは次の24時間から48時間以内にo1を追加すると思うで。プログラミングやコードのリファクタリング、エラー解決、複雑なコンテキストの理解に最高やからな。
でも、メッセージ制限は小さくなると思うで。このモデルは高価やからな。GPT-4の3〜4倍くらいの価格やで。だから、これらのサービスが無制限のメッセージを追加するとは思わんほうがええで。そんなことは起こらへんで。
ほな、もう一回やってみよか。ターミナルで…次のパッケージをインストールする必要があるみたいやな。ほな、新しいReactアプリを作るで。
エラーを解決できたみたいやな。もう一度言うけど、ワイはReact、Node.js、TypeScript、JavaScript、ウェブ開発について全く経験がないんや。これらのAIツールを使えば何かを作れるって自信と、なんとかしてやろうっていう意欲だけや。正直、このプロジェクトに関してはそれだけで十分やねん。
ほな、次のステップに進もか。必要なライブラリをインストールするで。可視化のために追加のライブラリが必要やな。D3.jsを使うで。ターミナルを開いて…これをコピーして、ターミナルに貼り付けて、エンターを押すんや。
次は何かな…インストール中やけど…ブラウザでラテックスをレンダリングするためのライブラリが2つ必要やな。これをコピーしよか。
ちなみに、もう一つできることがあるんや。Cursor内のターミナルを使うのが不安なら、Ctrl+Kを押して、AIとチャットするみたいに使えるんや。ここで、Claude 3.5 Sonnetを選んでるのが見えるやろ。AIに直接実行してもらうこともできるんや。
もう一つの方法は、メッセージ全体をコピーして、チャットで共有して、それをやってもらうことやな。でも、今はChatGPTのインターフェースを使おうと思うわ。コピペは最適じゃないけどな。でも、このUIの問題は全部3ヶ月以内に解決されるはずや。
ほな、D3をインストールしたな。次はこれを貼り付けて、エンターを押すんや。これが最後のライブラリやな。型定義が必要みたいや。
ステップ5、開発サーバーを起動しよか。デフォルトのReactアプリが動いてるか見てみよか。これはええな。テストするのは大事やで。ブラウザで開けるようになったで。
Ctrl+Vを押して、npm startを実行するか、これを許可しよか。Reactアププが起動したで。SRCを編集せえって言うてるな。
実際、これらを消そか。拡張機能にブロックされんようにな。これが今のウェブサイトや。もちろん、これはデフォルトのReactアプリやけどな。
ほな、実際に編集してみよか。ニューラルネットワークの可視化ツールを作るために、Reactアプリケーションを修正するんや。ニーズに合わせてアプリをカスタマイズし始めるで。
デフォルトファイルをきれいにしよか。Cursorで、SRCフォルダに移動して、次のファイルを削除するんや。SRCの…何を削除するんやっけ？App.css、App.test.tsx、logo.svg、それからservice-worker…どこにあるんやろ？setup-testsもないし、service-workerもTypeScriptにはないな。まあ、これを削除するわ。
ちょっと待てよ、アプリを閉じてからやるべきやったかもな。今、エラーが出てるし。まあ、o1…GPTって言いそうになったけど、もうGPTモデルやないからな。o1は全く別のクラスのモデルやからな。OpenAIがまだChatGPTって呼んでて、モデルがo1ってのはちょっと変やな。GPTやないのにな。まあ、どうでもええか。
これらのファイルを削除したで。ちょっと待てよ、削除したファイルへの参照を削除せなあかんのか。そうやな、index.tsxを修正して、削除したファイルへの参照を削除せなあかんな。
ええな、このコマンドをコピーして、Cursorでグローバルに使えるんや。index.tsxの全部を選択して、「編集」って言うて、「削除したファイルへの参照を削除して」って言うんや。それを送信して…受け入れて保存や。
まだ2つエラーが残ってるな。App.tsxとlogo.svg…これらのファイルへの参照があるんかな。ChatGPTが見逃したんかな。いや、違うな。
index.tsxの内容を置き換えるんやな。このコードをindex.tsxにコピーして、Ctrl+Vで貼り付けて保存や。それからApp.tsxも保存しよか。
でも、まだエラーが出てるな。components.neuralNetworkからニューラルネットワークをインポートしてるけど…
コンポーネントを作らなあかんのか。アプリケーションの構造を作るためにコンポーネントを作るんや。SRCにcomponentsフォルダを作ろか。
新しいフォルダを作って、componentsって名前を付けるんや。実は、この指示をコピーして、Ctrl+Kを使ってCursorにやってもらうこともできるんや。「SRCフォルダ内に、componentsって名前の新しいフォルダを作ってくれ」って言うたら、Cursorがやってくれるはずや。Ctrl+Kを押して、Ctrl+Vで貼り付けて…ほら、フォルダを作ってくれたで。
そして、これらのコマンドをコピーして、Cursorにやってもらうこともできるんや。「コンポーネントフォルダ内に、NeuralNetwork.tsxって名前の新しいファイルを作ってくれ」って言うたらええんや。エンターを押したら…ほら、そのファイルができたで。
ニューラルネットワークコンポーネントを作ろか。NeuralNetwork.tsxを開いて、次のコードを追加するんや。コピーして、Ctrl+V で貼り付けて、Ctrl+Sで保存や。
それをやったで。ステップ9、D3.jsを使ってニューラルネットワークを描画するんや。NeuralNetworkの一番上に、useEffect hookの中で使うdrawを実装するんや。コメントをこれで置き換えるんや。
実は、TypeScriptやReactに詳しくないから、これらの指示をコピーして、Ctrl+Kを押して、「これをそのまま実行して」って言うて、コードを渡せば、Cursorが代わりにファイルを編集してくれるんや。見てみ、コードを書いてくれてるで。ワイは受け入れるだけでええんや。これで適切にフォーマットされたコードができたで。
正直、これらの2つのAIツール、o1とCursorを一緒に使うのは違法みたいな感じがするわ。本当に、唯一の制限は想像力と野心だけやで。怠け者なら、いつも言い訳を見つけるんや。「プログラマーじゃない」とか「時間がない」とか「これがあれが」とかな。でも、怠け者じゃなくて、野心があって、金を稼ぎたいなら、何か作りたいなら、方法を見つけるはずや。今や、必要なものは全部あるんやからな。
続けよか。これはかなり長かったな。ツールチップでインタラクティブ性を追加するで。ニューロンや接続にユーザーがホバーしたときに情報を表示するんや。NeuralNetworkコンポーネントの一番上に、ツールチップの状態を作るんや。
また、Ctrl+Kを使って、ファイル全体を選択して、「ニューラルネットワークコンポーネントの一番上に、これを追加して」って言うて、それからコードを渡すんや。
もう100行以上のコードになってるな。もっとテストをするべきやったかもしれへんな。それはワイのミスや。「毎回の変更の後にテストして」って言うべきやったな。でも、見てみよか。たくさん変更したから、もっと大きな驚きになるかもしれへんな。最初の試みで全部うまくいくかどうか見てみるのは面白いで。もしそうなら、o1は本当に革命的やということやな。大げさに言うわけやないけど、OpenAIは多くの発表をしてきたけど、リリースは十分じゃなかったからな。これは本当のリリースで、すごいもんやで。
保存したで。次は何やろ。LaTeXを使って詳細な計算を実装するんや。DetailView.tsxを作ろか。
また、ターミナルを使うで。Ctrl+Jでターミナルを開いて、それからCursorのCtrl+Kを使うんや。Ctrl+Vを押して、エンターを押す。新しいアイテムのパス…これは正しいやり方じゃないかもしれへんな。ちょっと待てよ…
ファイルを開いて、フォルダを直接開こか。o1みたいにな。こうすれば、新しいターミナルを作ったときに、このフォルダにいることになるんや。
Ctrl+K を押して…Ctrl+V を押して、「SRCのcomponentsフォルダ内に」って送信するんや。これが正しいやり方かもしれへんな。まあ、やってみよか。
SRC、components…何が必要やったっけ？DetailView…よし、DetailViewにこのコードを追加するんや。開いて、Ctrl+Jでターミナルを隠して、Ctrl+Sで保存や。
React-mathjaxでエラーが出てるな。DetailViewをNeuralNetworkに統合しよか。
NeuralNetworkで、これをインポートする必要があるんや。Cursorがもう何をすべきか教えてくれてるな。すごいことやで。
状態を追加せなあかんけど、どこに追加するんやろ…また、これはトップにあるはずやな。ほな、Ctrl+Kを押して、多分ここの一番上やな。そうや…
コードが長くなってきたな。117行もあるで。
毎回こんなに満足感があるんや。すごいことやで。
DetailViewコンポーネントをレンダリングするんや。ツールチップの後に次のJSXを追加するんや。ここにあるはずやけど…どこやろ…ツールチップの後にレンダリングされてるはずやな。
ほな、面白いことをやってみるわ。これをセットして、Ctrl+Lを押して、「次にやるべきステップはこれやけど、どのファイルでやるべきかわからへん」って言うてみるわ。そして、Ctrl+Enterを押せば、コードベース全体にアクセスして、教えてくれるはずや。
ほら、NeuralNetwork.tsxファイルやって。ほな、いつものようにAIツールでやることをやろか。指示をコピペして、アクションを実行するんや。
受け入れて、Ctrl+Sで保存や。でも、まだこのエラーが出てるな…
「エラーを修正して」って言うてみるか。
モジュールを宣言…まだこれはやらへんで。o1を信じて、修正してくれるはずやからな。
ニューラルネットワークの計算を実装しよか。calculations.tsを作るんや。
実は、Ctrl+Lを押して、「DetailView.tsxファイルでエラーが出てる理由は何や？短く答えて、どう修正したらええか教えてくれ」って聞くこともできるんや。
答え…新しいファイルを作る…ファイルはもう作ったな。
続けよか。SRCフォルダにcalculationsを作るんや。
また、ターミナルを開いて、何をすべきか言うてみるで。エンターを押す。
新しいファイルができたで。基本的な関数を追加しよか。calculationsのTypeScriptにこのコードをコピーして、保存や。
ネットワークで計算を使うんや。関数をインポートするんや。これをNeuralNetworkの後ろにコピーしよか。
インポートはここでやるんやろか。他にインポートする場所はあるんかな。いや、ないな。
AIが実際に何をしてるかに注意を払うのも大事やで。盲目的にコピーするんじゃなくて、AIと一緒に学ぼうとするんや。
おっと、もう定義されてるんか。これを拒否して、「このコードをそのまま追加して」って言うてみるわ。また、「このコードをそのまま追加して」って言うてみるで。
ユーザーがデータを入力できるようにしよか。App.tsxで…よし、Ctrl+Kを押して…送信…受け入れる。
でも、inputs equals inputでエラーが出てるな。
コンポーネントを更新して…ええな。
NeuralNetwork.tsxに戻って…ファイル全体をハイライトする必要はないと思うわ。Ctrl+Kだけでええはずや。
これで、ここのエラーは解決したな。でも、まだこのエラーが残ってるな…
リアルタイムアップデートを実装しよか。inputsの変更を確実に…何が起こったんやろ。何もせえへんかったんか。
use effectフックを修正して、依存関係を含めるんや。
ワイ、頭おかしくなってるんやろか。ちょっと待てよ…use effectフックを修正して、依存関係を含める…
もう一回、チャット機能を使うてみるわ。「次のステップをどのファイルで実装すべきか、短く答えてくれ」って聞いてみるで。
もう実装されてるんかな。見てみよか。
そうみたいやな。ChatGPTが忘れたんかな。これが実際に見た最初のミスかもしれへんな。
まあ、どうでもええわ。戻ろか。
アプリケーションのスタイルを設定しよか。終わりに近づいてるけど、そのエラーを修正せなあかんな。後でo1に聞いてみるわ。
App.cssを作ろか。
また、信頼できるターミナルを使って、何をすべきか言うてみるで。送信…作成…App.cssができたで。このコードを貼り付けるだけや。
App.tsxでApp.cssをインポートするんや。
保存…アプリケーションのスタイルを設定した…
それはできへんな…「このステップの全てをやったけど、DetailView.tsxでこのエラーが出てるから進めへん」って言うてみるわ。
それから、「これが現在のDetailView.tsxファイルや。このエラーの修正方法を教えてくれ。簡単な言葉で、何が原因やったかを説明して、残りのステップの明確な指示をくれ」って入力するんや。
ChatGPTの中で週に30プロンプトしか使えへんから、フォローアップの質問を怖がらんでええで。必要なら聞いてええんや。もし使い切ってしまっても、Open Routerで使えるし、2つ目のOpenAIアカウントを買うこともできるで。2つ目のChatGPTアカウントを買うのも解決策やな。
「npm ls react」コマンドを実行したら、こんな出力が出たんや。この新しい情報を踏まえて、何をすべきか教えてくれ。
選択肢を考えて…はい、ありがとうございます。出力を提供してくれて。
まず、プロジェクトから削除して、それからMathJaxReactに切り替えるんや。最初に、プロジェクトから削除せなあかんな。
npm…そうしよか。できたで。
確認して、reactだけが存在するはずや。そうやな、それでええ。
ほな、DetailViewの更新を続けよか。何でもええわ…
方程式のフォーマットを更新して、クリックハンドラを更新して、全てのファイルを保存して、開発サーバーを再起動するんや。
おっ、動いたで！クリックしてもエラーが出えへんようになったわ。
すごいで。90分もかからんうちに、ニューラルネットワークの可視化ツールを作ったんや。これ、めっちゃすごいことやで。特に、ワイがReact、Node.js、TypeScript、JavaScript、ウェブ開発、これらのことについて完全な初心者やってことを考えたらな。Cursorについても新参者やし。
つまり、このプロジェクトに関して言えば、ワイにはほとんどスキルがないんや。ゼロに近いスキルしかない。ただ知ってるのは、AIツールを使えば何かができるってことと、自分で何とかする自信があるってことだけや。
正直、この時代に何かを作る、何かを構築するのに必要なのはそれだけやで。どんなプロジェクトでも、スタートアップのアイデアでも、クライアントのためのプロジェクトでも、ウェブサイトを作るのでも、アプリ全体を作るのでも、今やできるんや。
特に、OpenAIの新しい超スマートなモデルo1を使えばな。これは高度な推論、思考の連鎖を使って、他のモデルじゃ絶対にできへんことを成し遂げられるんや。
OpenAIに大きな拍手を送りたいわ。また一つ、すごいことをやってのけたな。みんなが疑ってた、ワイも含めてやけど、でも彼らはやり遂げたんや。素晴らしいモデルを作り出したわ。
正直、これからもっと多くの動画でこれを使うつもりや。もっと面白いことが待ってるで。
この動画を楽しんでもらえたなら、そしてAIで真剣に金を稼ぎたいと思うなら、新しい社会に参加することを忘れんといてな。リンクは説明欄にあるで。すでにAIで金を稼いでる人がおるんや。まだo1の実装も始めてへんのにな。
AIで真剣に金を稼ぎたいなら、新しい社会に参加するのを忘れんといてな。説明欄の一番上のリンクや。
見てくれてありがとう。
コメント