今日の料理アプリ「DaD」のプログラムをChatGPT4と改善

2023年3月28日
AI BLOG Technology web

前回の「ChatGPT4とWEBアプリの名前やデザイン感を決める」とい記事で名前が決まった、「今日の料理とレシピ」を提案してくれるWEBアプリ「D-a-D（ディーエーディー）」。残りの以下の改善を実施していきたいと思います。

改善項目

・レシピなどのデータはJSONで管理 – 将来的なAPI化にも対応させる
・デザインをデザイナーがデザインし整える
・料理の画像をもっと美味しそうに出力
・レシピデータをChatGPTで制作し実用に耐えれるデータ量とする

早速、プログラムを書いてもらいながら改善していきます。

JSONに対応

現状javascript内にハードコーディングされている、レシピデータをJSONで外部から非同期で読み込みます。

JSONファイルを作成

[
  {
    "name": "オムライス",
    "img": "omurice.jpg",
    "steps": [
      "玉ねぎをみじん切りにする",
      "フライパンで玉ねぎを炒める",
      "ご飯とケチャップを加えて炒める",
      "別のフライパンで卵を焼く",
      "卵をご飯の上にのせる"
    ]
  },
  {
    "name": "カルボナーラ",
    "img": "carbonara.jpg",
    "steps": [
      "スパゲッティを茹でる",
      "ベーコンをフライパンで炒める",
      "卵、粉チーズ、黒コショウを混ぜる",
      "炒めたベーコンに茹でたスパゲッティを加える",
      "卵の混ぜ物を加え、よく混ぜる"
    ]
  },
  {
    "name": "寿司",
    "img": "sushi.jpg",
    "steps": [
      "酢飯を作る",
      "刺身を薄くスライスする",
      "手に酢水をつけ、酢飯を握る",
      "刺身を酢飯の上にのせる",
      "わさびと醤油で食べる"
    ]
  }
]

作成したJSONを読むためにjavascriptを調整

let recipes = [];

async function fetchRecipes() {
  const response = await fetch('recipes.json');
  const data = await response.json();
  recipes = data;
  displayRecipe();
}

function displayRecipe() {
  const recipe = recipes[Math.floor(Math.random() * recipes.length)];
  document.getElementById('recipe-image').src = recipe.img;
  document.getElementById('recipe-name').textContent = recipe.name;
  const steps = document.getElementById('recipe-steps');
  steps.innerHTML = '';
  for (const step of recipe.steps) {
    const li = document.createElement('li');
    li.textContent = step;
    steps.appendChild(li);
  }
}

fetchRecipes();