API の実践 — 外部サーバーへのリクエストの送信と応答の処理方法を学びます。これは、現代のWeb開発者にとって重要なスキルです。
クールなビジュアル — あなたの作品の出来上がり具合がすぐに見られます。テキストを入力すると、鮮やかな画像が表示されます。とても楽しくて、やる気が出ます。
知識の定着 — HTML、CSS、JS — すべてが1つの場所に。抽象的な例ではなく、実際のミニアプリケーションで。
明るいテーマと暗いテーマ — 近年のトレンド。それらの間にスイッチボタンを作成し、それが実際にどのように実装されているかを学びます。
ポートフォリオ —このようなプロジェクトは間違いなく注目されます。APIを操作し、インターフェースを作成し、ユーザーのことを考えることができることを示しています。

もし、あなたが役に立ち、美しく、本当に興味深いプロジェクトを探していたなら、それはまさにこれです。

🛠️ これから何をしますか？

想像してみてください。ページを開いて、「夕暮れ時の雲の上の城」のようなフレーズを入力し、ボタンを押すと、数秒後にAIによって作成されたユニークな画像が表示されます。それがまさに私たちが実現しようとしていることです！

ユーザーが以下のことができる本格的なWebアプリケーションを作成します。

架空の場面を説明するテキスト記述（プロンプト）を入力する
画像生成モデルを選択する（例：Stable Diffusion）
画像の数を1枚から4枚まで設定する
希望するアスペクト比を設定します。正方形、水平、または垂直
「生成」ボタンを押すと、すぐに結果が表示されます
コンピューターに画像を保存する 💾

さらに、テーマを明るいものと暗いものに切り替えることもできます。便利で、モダンで、美しい。

このプロジェクトは、実際のウェブ開発スキルを習得し、最新のAIツールの仕組みを理解するのに役立ちます。

📁 プロジェクトの構造

コードを書く前に、プロジェクトを適切に整理する必要があります。これは重要なステップです。明確な構造は、将来的にナビゲートして変更を加えるのを容易にします。

別のフォルダを作成し、たとえばai-image-generatorと名付けます。このフォルダ内に3つのメインファイルを作成します。

index.html — ここにはメインのマークアップが配置されます。ページ構造、ボタン、入力フィールド、ドロップダウンリストなどです。
style.css — 現代的で適応性のあるデザインを作成し、ダークテーマとライトテーマを実装するスタイルファイル
script.js — ロジックを担当するJavaScriptファイル：データ処理、APIへの接続、画像の生成、インターフェースとの相互作用

すべてがシンプルでわかりやすい。数分後には、創造を始めるためのベースができます！

1️⃣ HTML (index.html)

まずは最も重要なこと、つまりアプリケーションのフレームワークから始めましょう。HTMLはページの構造を担当します。つまり、すべての外観、ボタン、フィールド、見出しの場所を決定します。ここでは、ユーザーがブラウザで見るものを説明します。

HTMLは、スタイル（CSS）とロジック（JavaScript）が「適用」される基礎です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Image Generator Kodik APP</title>
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
  <!-- Header -->
  <header class="header">
    <div class="logo-wrapper">
      <div class="logo">
        <i class="fa-solid fa-wand-magic-sparkles"></i>
      </div>
      <h1>AI Image Generator</h1>
    </div>
    <button class="theme-toggle">
      <i class="fa-solid fa-moon"></i>
    </button>
  </header>
  <div class="main-content">
    <form action="#" class="prompt-form">
      <!-- Prompt Textarea Container -->
      <div class="prompt-container">
        <textarea class="prompt-input" placeholder="Describe your imagination in detail..." spellcheck="false" autofocus required></textarea>
        <button type="button" class="prompt-btn" title="Get Random Prompt">
          <i class="fa-solid fa-dice"></i>
        </button>
      </div>
      <!-- Prompt Actions / Buttons -->
      <div class="prompt-actions">
        <div class="select-wrapper">
          <select class="custom-select" id="model-select" required>
            <option value="" selected disabled>Select Model</option>
            <option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev</option>
            <option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</option>
            <option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
            <option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option>
            <option value="stabilityai/stable-diffusion-3-medium-diffusers">Stable Diffusion 3</option>
          </select>
        </div>
        <div class="select-wrapper">
          <select class="custom-select" id="count-select" required>
            <option value="" selected disabled>Image Count</option>
            <option value="1">1 Image</option>
            <option value="2">2 Images</option>
            <option value="3">3 Images</option>
            <option value="4">4 Images</option>
          </select>
        </div>
        <div class="select-wrapper">
          <select class="custom-select" id="ratio-select" required>
            <option value="" selected disabled>Aspect Ratio</option>
            <option value="1/1">Square (1:1)</option>
            <option value="16/9">Landscape (16:9)</option>
            <option value="9/16">Portrait (9:16)</option>
          </select>
        </div>
        <button type="submit" class="generate-btn">
          <i class="fa-solid fa-wand-sparkles"></i>
          Generate
        </button>
      </div>
    </form>
    <!-- Result Gallery Grid -->
    <div class="gallery-grid"></div>
  </div>
</div>
<script src="script.js"></script>
</body>
</html>

2️⃣ CSS (style.css)

構造ができたので、アプリケーションを本当に美しく、目を楽しませるものにする時が来ました。CSSは、ボタンから背景まで、すべての要素の外観を決定します。

当社の場合、以下のようなモダンなデザインを作成します。

スムーズなアニメーション
コンピューターとスマートフォンの両方で見栄えが良くなるように、アダプティブレイアウトを使用
ユーザーがワンクリックで切り替えられる明るいテーマと暗いテーマ
スタイリッシュなボタン、入力フィールド、画像カード

フォントも接続します Inter Googleフォントを使用すると、モダンで読みやすくなります。

このインターフェースは使いやすく、インターネット上の既製のサービスに劣る点はありません。

/* Importing Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}
:root {
  --color-primary: #5C56E1;
  --color-primary-dark: #5b21b6;
  --color-accent: #8B5CF6;
  --color-card: #FFFFFF;
  --color-input: #F1F1FF;
  --color-text: #09090E;
  --color-placeholder: #5C5A87;
  --color-border: #D4D4ED;
  --color-gradient: linear-gradient(135deg, #5C56E1, #8B5CF6);
}
body.dark-theme {
  --color-card: #1E293B;
  --color-input: #141B2D;
  --color-text: #F3F4F6;
  --color-placeholder: #A3B6DC;
  --color-border: #334155;
  background: var(--color-card);
  background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
}

（完全なコードはgithubで入手できます。記事の最後にあるリンクは、style.cssに挿入するだけです）

3️⃣ JavaScript (script.js)

HTMLは構造を、CSSは外観を、そしてJavaScriptはアプリケーションに命を吹き込みます。

このツールを使用して、次のことができます。

ユーザー入力を処理します。テキストの説明、選択したモデル、生成パラメータ
画像を取得するために、Hugging Face APIにリクエストを送信します
読み込み効果のある美しいグリッドに画像を表示します
興味深いアイデアを自動的に入力する「ランダムヒント」ボタンの機能を追加します
明るいテーマと暗いテーマの切り替えを実装する

ここでは、DOM、イベント、非同期リクエスト（fetch）などを操作します。これは、実際のJavaScript開発スキルを身につけるための素晴らしいトレーニングです！

👉 PASTE-YOUR-API-KEYの代わりにHugging Face APIキーを挿入します。

const promptForm = document.querySelector(".prompt-form");
const themeToggle = document.querySelector(".theme-toggle");
const promptBtn = document.querySelector(".prompt-btn");
const promptInput = document.querySelector(".prompt-input");
const generateBtn = document.querySelector(".generate-btn");
const galleryGrid = document.querySelector(".gallery-grid");
const modelSelect = document.getElementById("model-select");
const countSelect = document.getElementById("count-select");
const ratioSelect = document.getElementById("ratio-select");

const API_KEY = "PASTE-YOUR-API-KEY"; // Hugging Face API Key

// Example prompts
const examplePrompts = [
  "A magic forest with glowing plants and fairy homes among giant mushrooms",
  "An old steampunk airship floating through golden clouds at sunset",
  "A future Mars colony with glass domes and gardens against red mountains",
  "A dragon sleeping on gold coins in a crystal cave",
  "An underwater kingdom with merpeople and glowing coral buildings",
  "A floating island with waterfalls pouring into clouds below",
  "A witch's cottage in fall with magic herbs in the garden",
  "A robot painting in a sunny studio with art supplies around it",
  "A magical library with floating glowing books and spiral staircases",
  "A Japanese shrine during cherry blossom season with lanterns and misty mountains",
  "A cosmic beach with glowing sand and an aurora in the night sky",
  "A medieval marketplace with colorful tents and street performers",
  "A cyberpunk city with neon signs and flying cars at night",
  "A peaceful bamboo forest with a hidden ancient temple",
  "A giant turtle carrying a village on its back in the ocean",
];

キーをお持ちでない場合は、無料で登録してください huggingface.co Access Tokensセクションで受け取る

（完全なコードはgithubで入手できます。記事の最後にリンクがあります）

💡 結果

このプロジェクトを終えたら、単なるファイルの集まりではなく、本格的な人工知能を搭載した本格的なミニアプリケーションが完成します。

次のことが可能になります。

想像上の説明を入力すると、まるでファンタジーのような画像が生成されます
Stable Diffusionの人気バージョンを含む、さまざまなモデルを使用して生成する
お気に入りの写真を保存して友達と共有する
時間帯や気分に合わせてテーマを切り替えます🌞🌙

そして何よりも、自分でやったんだ。最初から最後まで。このような結果は、自信とモチベーションを強く与え、さらに前進することができます！

📌 改善のためのヒントとアイデア

プロジェクトはすでに準備ができていますが、ここで終わりにする必要はありません。さらにレベルアップする方法は次のとおりです。

お気に入り — 最高の画像を個別のギャラリーに追加できるようにする
リクエストの編集 — フォームを完全に再読み込みせずにプロンプトを変更できる再生成ボタンを追加します
履歴 — 以前のクエリと画像を localStorage に保存して、ユーザーが後でそれらに戻ることができるようにする
フィードバック — ユーザーが結果を評価したり、コメントを残したりできるようにする
共有する — リンクを介して画像を共有したり、ソーシャルネットワークにエクスポートしたりする機能を追加する

これは、プロジェクトを開発し、同時にスキルをレベルアップするための優れた方法です！

🙋 よくある質問（FAQ）

🔑 Hugging FaceのAPIキーはどこで入手できますか？

ウェブサイトに移動 huggingface.co、アカウントを作成し（まだお持ちでない場合）、セクションに移動します Settings > Access Tokens 新しいキーを生成します。script.jsの変数API_KEYに挿入します。

🖼️ 一度に生成できる画像の数は？

1〜4枚の画像を選択できます。この値は、ページのドロップダウンリストで設定します。

⚠️ 画像が読み込まれないのはなぜですか？

考えられる原因：

APIキーが無効です
インターネット接続が不安定です
モデル側のエラー（詳細はブラウザのコンソールログで確認できます）

🌗 テーマの切り替えはどのように機能しますか？

サイトは選択したテーマ（ライトまたはダーク）を記憶し、localStorageに保存します。また、ブラウザのシステム設定も考慮します。

📱 モバイルで動作しますか？

はい、インターフェースはモバイルデバイスに適応しています。すべての要素が拡大縮小され、画像ギャラリーが画面に合わせて再構築されます。

📤 結果を共有できますか？

もちろんです！画像の下にあるダウンロードアイコンをクリックすると、ファイルが保存され、友達に送信したり、ソーシャルネットワークに投稿したりできます。

✅ 結論

以上です。空のフォルダから、テキストから画像を生成するAIアプリケーションを作成しました。 🔥

あなたは以下の方法を理解しました。

HTMLを使用してインターフェースを構築する
CSSを適用して、レスポンシブでモダンなデザインを作成する
JavaScriptを有効にして外部APIと連携する

このプロジェクトは単なる教育プロジェクトではありません。見た目も良く、安定して動作し、本物のWebツールを構築できることを示しています。

実験を続けてください。

新しいモデルを試す
インターフェースを変更する
新しい機能を追加する

すべての改善は、開発者としてのあなたをより強くします。あなたの旅路に幸運を祈ります！ 🚀

ソースコードはこちらからダウンロードできます GitHub

HTML、CSS、JavaScriptを使用して画像AIジェネレーターを作成する方法

📚 目次

理論を読むのに疲れた？
コーディングの時間だ！

🚀なぜこのようなプロジェクトをするのですか？

🛠️ これから何をしますか？

📁 プロジェクトの構造

1️⃣ HTML (index.html)

2️⃣ CSS (style.css)

3️⃣ JavaScript (script.js)

💡 結果

📌 改善のためのヒントとアイデア

🙋 よくある質問（FAQ）

✅ 結論

記事は気に入った？
実践の時間だ！

HTML、CSS、JavaScriptを使用して画像AIジェネレーターを作成する方法

📚 目次

理論を読むのに疲れた？ コーディングの時間だ！

🚀なぜこのようなプロジェクトをするのですか？

🛠️ これから何をしますか？

📁 プロジェクトの構造

1️⃣ HTML (index.html)

2️⃣ CSS (style.css)

3️⃣ JavaScript (script.js)

💡 結果

📌 改善のためのヒントとアイデア

🙋 よくある質問（FAQ）

✅ 結論

記事は気に入った？実践の時間だ！

理論を読むのに疲れた？
コーディングの時間だ！

記事は気に入った？
実践の時間だ！