Zenn
🔍

ChatGPTで絵文字検索アプリを作った

2023/03/24に公開
ネタ
emoji
ChatGPT
tech

はじめに

ChatGPTはemojiを扱うのも上手で自然言語から絵文字を連想できたりもします。これは意外と便利で、例えばzennの記事を書いたとき記事のタイトルからぴったりな絵文字を考えてくれたりできます。

prompt

「ChatGPTで絵文字検索アプリを作った」というタイトルのブログ記事の、slug、記事を表すemojiを考えてください。
それぞれ複数の候補を提案してください。
また、出力形式は以下の通りです。

npx zenn new:article --slug "${slug}" --title "${title}" --emoji "${emoji}"

completion

提案1:
npx zenn new:article --slug "chatgpt-emoji-search-app" --title "ChatGPTで絵文字検索アプリを作った" --emoji "🔍"

提案2:
npx zenn new:article --slug "creating-emoji-finder-with-chatgpt" --title "ChatGPTで絵文字検索アプリを作った" --emoji "🔎"

提案3:
npx zenn new:article --slug "chatgpt-emoji-discovery" --title "ChatGPTで絵文字検索アプリを作った" --emoji "😀"

提案4:
npx zenn new:article --slug "emoji-searcher-using-chatgpt" --title "ChatGPTで絵文字検索アプリを作った" --emoji "🕵️"

提案5:
npx zenn new:article --slug "chatgpt-powered-emoji-finder" --title "ChatGPTで絵文字検索アプリを作った" --emoji "🌐"

この仕組を使って今回は絵文字を検索できるアプリを作ってみました。

作ったもの

Nextjsで作っています。当然、コードもほとんどChatGPTに生成してもらいました。

フロントエンド

pages/index.js
import styles from '../styles/SearchEmoji.module.css'

import { useState } from 'react';

const SearchEmoji = () => {
  const [input, setInput] = useState('');
  const [emojis, setEmojis] = useState([]);
  const [isLoading, setLoading] = useState(false);

  const handleSearch = async (event) => {
    event.preventDefault();
    setEmojis([]);
    setLoading(true);
    const response = await fetch(`/api/emoji?prompt=${input}`);
    const data = await response.json();
    setLoading(false);
    setEmojis(data.emojis);
  };

  const handleEmojiClick = (emoji) => {
    navigator.clipboard.writeText(emoji);
  };

  return (
    <div className={styles.container}>
      <form className={styles.form} onSubmit={handleSearch}>
        <input
          type="text"
          placeholder="Search for emojis..."
          value={input}
          disabled={isLoading}
          onChange={(e) => setInput(e.target.value)}
        />
      </form>
      <div className={styles.results}>
        {isLoading && <div className={styles.loading}>Loading...</div>}
        {emojis.map((emoji, index) => (
          <div className={styles.result} key={index} onClick={() => handleEmojiClick(emoji.emoji)}>
            <div className={styles.emoji}>{emoji.emoji}</div>
            <div className={styles.name}>{emoji.name}</div>
            <div className={styles.reason}>{emoji.reason}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SearchEmoji;

バックエンド

pages/api/emoji.js
const { Configuration, OpenAIApi } = require('openai');
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const PROMPT_TEMPLATE = `以下の文章を一文字の絵文字に変換して以下のJSON形式で出力してください。
# 条件
* 候補をいくつか提案してください。
* それ以外のテキストは何も出力しないでください。\n

# JSON形式
\`\`\`json
[{
  "emoji": "👍",
  "name": "thumbs up",
  "reason": "候補として選定した理由を設定してください",
}]
\`\`\`

# 絵文字に変換する文章
`;

async function getEmojis(prompt) {
  console.debug(prompt);
  const response =  await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: [
      {role: 'user', content: PROMPT_TEMPLATE + prompt},
    ],
    temperature: 0,
  });
  const completion = response?.data?.choices[0]?.message?.content;
  console.debug(completion);
  return JSON.parse(completion.trim());
}

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const prompt = req.query.prompt;
    try {
      const emojis = await getEmojis(prompt);
      res.status(200).json({ emojis });
    } catch (e) {
      console.error(e?.response?.data || e);
      res.status(404).json(e?.response?.data || { message: 'Not found' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

実行結果

こんな感じです。どうしてこのemojiを選んだのか理由も教えてくれるところが面白いですね。

まとめ

今回もそこまで実用性はないアプリですが、ChatGPTでこんな事もできるよという紹介でした！

Discussion