どうも
個人開発アドベントカレンダーの2日目を担当させていただきます @nabettu です。
個人開発ということで、最近個人開発したサービスの中身をこっそり教えちゃいます。
コピーして作ってみてもいいよ！
サービス紹介
ということで、タイトルの通り 「コードを別な言語に書き換えるサービス」 を作ってみました。
言語を選択してコードを書いて、変換先の言語を選択してTranslateボタンを押すだけです。
これは２つめ以上のプログラミング言語を習得しようとしているプログラマがターゲットで、使い慣れた言語では書けるコードを学習中の言語でどう書くかがわかると便利だろうということで作りました。
また、ProductHuntに出してみたりもしましたが、Education部門で週4位というなんとも言えない結果になりましたｗ
使っている技術
- Next.js
- ChakraUI
- Vercel
- OpenAI
を使って作ってみました。UIやホスティングは特に解説がいらないと思いますので、今回はOpenAIの紹介をしたいと思います。
OpenAIのGPT-3とは
GPT-3はAI研究企業であるOpenAIが発表した、汎用言語モデルです。
最近話題のChatGPTもこちらの会社がやってます。
登録してAPI経由でテキストを送ると、AIに続きの文を書いてもらえます。
こちらにチュートリアルがあるので、ぜひ触ってみてください。SDKを使えばいいのでコード自体はめちゃめちゃ少なく書けます。
10分くらいでできるのでぜひ！
実際に使っているコードをサンプルに、使い方を説明します。
実際の今回のコードの紹介
Next.jsなので、/api配下にtsファイルを置くだけです。
なんとバックエンドのコードは呪文を含めて40行くらいでした。
テキストを送ると続きを書いてくれるので、今回は
「JavaScriptで書くとこう、このコードをPHPで書くと〇〇」の〇〇の部分をAIに書いてもらう形ですね。
バックエンドはパラメータを直してOpenAIのAPIを叩くだけで
- 入力言語
- 入力コード
- 出力言語
を含めた呪文を書いて、出力コードを返す形です。パラメータはアウトプットしたい内容に応じて都度調整するといいと思います。
import { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
function generatePrompt({
inputLang,
outputLang,
inputProgram,
}: {
inputLang: string;
outputLang: string;
inputProgram: string;
}) {
return `${inputLang}というプログラミング言語で書いた下記のプログラムがある。
${inputProgram}
これを${outputLang}というプログラミング言語で書くと以下のようになる。
`;
}
const translate = async (req: NextApiRequest, res: NextApiResponse) => {
const completion = await openai.createCompletion({
model: "text-davinci-002",
prompt: generatePrompt(req.body),
temperature: 0.6,
max_tokens: 256,
});
res.status(200).json({ result: completion.data.choices[0].text });
};
export default translate;
見てわかるとおり、手抜きしていわゆる”呪文”も日本語のままですw
※ホントはバリデーションとかもありますが省略
実際の出力されるコードの品質はものによるのでなんとも言えない結果もありますｗ
js→phpとかであれば、割とネット上にコードが転がっているからか、コンパクトな関数程度であれば割とちゃんと動くものが出てきます。
しかし情報の少ない言語は、、、笑
料金体系
短いコードなら安いので、こういうお遊びサービスを作る分には無料で試せる範囲に収まります。
まとめ
チュートリアルに毛が生えたようなコードにUIつけただけのサービスを試しに作ってみましたが、めちゃめちゃ楽にできました。
作業時間は賞味3時間くらい。しかし意外とそれっぽいサービスが出来たと思いません？
みんなもOpenAIがめちゃめちゃ楽に使えるから、これでサービスを作って「これで俺もAIエンジニアだ！」って言ってきましょ〜
終わりです。
明日は@retoruto_carryさん「今年作ったものについて書く！」をよろしくお願いします！