App Routerとv0とCursorでなるべくコードを書かずにアプリを作ってみる

npx create-next-app@latest
を実行。すべてデフォルト設定。

npm run dev
で開発サーバが立ち上がることを確認

今回は、ボイスクローニングアプリを作る。
ユーザはアクセスをすると、マイクのボタンが出てきて、それを押すと読み上げる文字が出てきて、それを読み上げることを求められる。
読み上げ終わるとロード画面が表示され、完了するとボタンがいくつか出てくる。そのボタンには「こんにちは」や「そうなんだ〜」などの文字が書かれており、それをクリックするとその音声が自分の声で流れる。
カスタムのボタンを追加することができる。

この時の画面設計をChatGPTに依頼する。

1. マイク画面
   画面上部: アプリのタイトルと簡単な説明文。例:「ボイスクローニングアプリへようこそ！下のボタンを押して読み上げを開始してください。」
   中央: 大きなマイクのアイコン。このアイコンをタップすると読み上げが始まります。
   画面下部: 「読み上げ開始」ボタン。このボタンを押すと読み上げる文字が出てきます。
2. 読み上げ画面
   画面上部: タイマーまたは進捗バー。ユーザーが読み上げの進捗を確認できるようにします。
   中央: 読み上げる文字が大きく表示されます。文字はクリアで読みやすいフォントを使用してください。
   画面下部: 「読み上げ終了」ボタン。読み上げが終わったらこのボタンを押してください。
3. ロード画面
   中央: ロード中を示すアニメーションまたは進捗バー。
   画面下部: 「読み上げ終了」ボタンを押した後、ユーザーには少し待ってもらう必要があるかもしれません。その間、画面には「お待ちください...」のようなメッセージを表示します。
4. ボタン選択画面
   画面上部: 「選んだフレーズを聞いてみよう！」のような説明文。
   中央: 録音されたフレーズのボタンが一覧表示されます。「こんにちは」、「そうなんだ〜」などのテキストが書かれており、ボタンをクリックするとその音声が流れます。
   画面下部: 「カスタムボタンの追加」ボタン。これを押すと、新しいフレーズを録音してボタンに追加することができます。
5. カスタムボタン追加画面
   画面上部: 「新しいフレーズを録音しよう！」のような説明文。
   中央: テキスト入力フィールド（新しいフレーズを入力するため）と、録音開始ボタン。
   画面下部: 「録音終了」ボタンと「保存」ボタン。
   これらの画面を通じて、ユーザーは直感的にアプリを操作し、自分の声で録音されたフレーズを再生することができます。デザインをさらに洗練させるために、アニメーションやトランジションを活用し、ユーザーが操作する楽しさを感じられるよう工夫してください。

v0に食べさせるにあたって、英語の方がいい気がするのでChatGPTに翻訳させる

1. Microphone Screen
   Top of the Screen: App title and a brief description. For example: “Welcome to the Voice Cloning App! Press the button below to start reading aloud.”
   Center: A large microphone icon. Tapping this icon will start the reading aloud process.
   Bottom of the Screen: “Start Reading Aloud” button. Pressing this button will bring up the text to be read aloud.
2. Reading Aloud Screen
   Top of the Screen: A timer or progress bar to help users keep track of their reading progress.
   Center: The text to be read aloud, displayed prominently. Ensure the text is in a clear and readable font.
   Bottom of the Screen: “End Reading Aloud” button. Press this button once the reading is complete.
3. Loading Screen
   Center: A loading animation or progress bar.
   Bottom of the Screen: After pressing the “End Reading Aloud” button, users may need to wait for a moment. During this time, display a message like “Please wait...” on the screen.
4. Button Selection Screen
   Top of the Screen: A descriptive text like “Let’s listen to the phrases you've recorded!”
   Center: A list of buttons with recorded phrases. Text such as “Hello,” “Is that so?”, etc., is written on them, and clicking a button will play the audio in the user’s voice.
   Bottom of the Screen: “Add Custom Button” button. Pressing this allows users to record a new phrase and add it as a button.
5. Add Custom Button Screen
   Top of the Screen: A descriptive text like “Let’s record a new phrase!”
   Center: A text input field (for entering the new phrase) and a “Start Recording” button.
   Bottom of the Screen: “End Recording” button and “Save” button.
   Through these screens, users can intuitively operate the app and play back phrases recorded in their own voice. To further refine the design, utilize animations and transitions to enhance the user experience and make the app enjoyable to interact with.

 npx v0@latest init

というコマンドが必要らしいので実行。

v0で出てきた画面を使うのは、以下のコマンドでできるらしい。

npx v0 add dH5Q8vQV1bM

適当に、app/record/page.tsxを作って、上記で作成されたコンポーネントを表示

import { MicrophoneScreen } from "@/components/microphone-screen"

export default () => {
    return <MicrophoneScreen/>
}

2つ目の画面もv0で作らせる。イメージと少し違ったので、日本語で修正指示を出してみる。

最後の画面は長めの指示で作らせる

Button Selection Screen
Top of the Screen: A descriptive text like “Let’s listen to the phrases you've recorded!”
Center: A list of buttons with recorded phrases. Text such as “Hello,” “Is that so?”, etc., is written on them, and clicking a button will play the audio in the user’s voice.
Bottom of the Screen: “Add Custom Button” button. Pressing this allows users to record a new phrase and add it as a button.
Add Custom Button Screen
Top of the Screen: A descriptive text like “Let’s record a new phrase!”
Center: A text input field (for entering the new phrase) and a “Start Recording” button.
Bottom of the Screen: “End Recording” button and “Save” button.
Through these screens, users can intuitively operate the app and play back phrases recorded in their own voice. To further refine the design, utilize animations and transitions to enhance the user experience and make the app enjoyable to interact with.

コンポーネントは揃ったが、それらをどう繋ぎ合わせるかはAIでは難しいか？

Cursorを使って自然言語ベースで編集を行なっていく

• ボタンを押したら録音画面に遷移する
  という指示を出して作ったが、以下のエラーが出る

Error: Event handlers cannot be passed to Client Component props.
  <button className=... onClick={function} children=...>
                                ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

"use client"; をコンポーネントに追加して回避。うーん、まあいっか。

CursorのEditで簡単なことは大体やってくれる。コードを書くのは、ファイルを作ったりするときくらいだが、それもAIでできるんだろうか