つまみログ

つまみネット

バックエンドでの処理

バックエンドはフロントエンドから呼び出され、複雑なロジックや処理を担う重要な役割を果たします。例えば、Webサイトへのログイン認証や、ECサイトでの決済処理などもバックエンドで行われています。

クライアントサイドにすべての処理を記述すると、APIキーの漏洩などセキュリティリスクが生じる可能性があります。これを防ぐため、データベースや外部APIへのアクセスコードはバックエンドに隠蔽する必要があります。

また、重い処理をクライアントサイドで行うと、デバイスに負荷がかかりパフォーマンスが低下します。バックエンドは効率的なリクエスト処理や負荷分散を行い、複数ユーザーへの対応やシステム全体の拡張性を確保します。さらに、ビジネスロジックを集約することでコードの一貫性とメンテナンス性を向上させます。

メタデータの検索 (GET /icongen/query)

←1 24 →

‌

‌
‌
‌

‌

‌
‌
‌

‌

‌
‌
‌
‌
‌
‌
‌
‌

‌

‌
‌
‌
‌
‌
‌
‌
‌

AIつまみアイコンを支える技術 (Webアプリ実装編) - つまみログ

←1 24 →

バックエンドでの処理

メタデータの検索 (GET /icongen/query)

←1 24 →

TypeScript

import { desc, eq, or, and, like, count } from 'drizzle-orm'
import { drizzle } from 'drizzle-orm/d1'
import { getContext } from 'hono/context-storage'

function createWhereQuery(query: ImageMetadataQuery['where']) {
  const { prompt } = query
  const tokens = prompt ? prompt.split(/\s+/) : []
  return and(
    ...tokens.map(token =>
      or(like(images.promptText, `%${token}%`), like(images.promptTranslated, `%${token}%`)),
    ),
  )
}

export const imageMetadataRepoCloudflareD1WithKV: ImageMetadataRepo = {
  async query(query) {
    const c = getContext<Env>()
    const db = drizzle(c.env.DATABASE)
    const res = await db  
      .select()  
      .from(images)  
      .where(createWhereQuery(query.where))  
      .orderBy(desc(images.createdAtMillis))  
      .offset(query.offset)  
      .limit(query.limit)

GPT-4o に与えるプロンプト (和訳)

あなたのタスクは、Stable Diffusion向けの視覚的に魅力的で、創造的かつ一貫性のある画像生成プロンプトを作成することです。以下のステップに従って進めてください。

フェーズ 1: 入力語の理解
- 提供された入力語を注意深く確認してください。
- すべての単語を使用する必要はありません。 最も魅力的で一貫性のあるシーンを作成するために単語を選びましょう。
- コンテンツガイドライン（例：健全であること、包括性）を遵守しつつ、ユーモアや視覚的な魅力を保ちましょう。
フェーズ 2: 「基本」プロンプトの作成
- 目的: 入力語に基づいてシンプルでわかりやすい説明を作成します。
- ガイドライン: プロンプトは「an icon of trpfrog」で始め、入力語をいくつか取り入れてください。
- アイデア出し: この段階ではアイデアを探るため、長めのプロンプトでも問題ありません。
フェーズ 3: 「創造的」プロンプトの展開
- 目的: ユニークで面白い、または予想外の要素を取り入れて、シーンを視覚的または概念的に魅力的にします。
- ガイドライン: プロンプトは「an icon of trpfrog」で始め、詳細を追加してシーンを広げます。
- 焦点: スタイル、修飾語、および追加の詳細を使用してシーンを強化しつつ、適切性と一貫性を保ちます。
フェーズ 4: 「洗練された」プロンプトの作成
- 目的: 創造的な草案を20語程度の簡潔で視覚的に一貫性のある説明に仕上げます。
- ガイドライン: プロンプトは「an icon of trpfrog」で始めます。
- 洗練: 不要な詳細を削減し、明確性を確保しつつ、ユーモアや視覚的な魅力を維持します。この段階の編集でシーンがどう改善されたかを説明してください。
フェーズ 5: 「最終」プロンプトの作成
- 目的: 「洗練された」説明を15語以内のプロンプトに凝縮します。
- ガイドライン: 最終プロンプトは「an icon of trpfrog」で始めます。
- 焦点: 明確性、視覚的インパクト、簡潔さを優先します。このバージョンが最も効果的である理由を説明してください。
フェーズ 6: プロンプトの日本語訳
- 最終プロンプトを日本語に翻訳します。
- 「trpfrog」は「つまみさん」と翻訳してください。
- 翻訳において同じトーン、ユーモア、視覚的な意図を維持してください。

画像生成プロンプト作成のヒント

詳細に記述する: Stable Diffusionは、物体、環境、スタイルを具体的かつ詳細に記述すると効果的です。
重要な要素を強調する: シーンの最も重要な部分に焦点を当て、モデルを効果的に導きます。
修飾語を試す: 「フォトリアリスティック」、「鮮やかな色彩」、「劇的なライティング」、「ファンタジースタイル」などの言葉を使用して出力を調整します。
詳細と簡潔さのバランス: プロンプトに過剰な詳細を詰め込みすぎないようにし、一貫性と明確さを優先します。
光とムードを活用する: 「柔らかな光」、「ゴールデンアワー」、「幻想的な輝き」などの言葉を使用して深みや雰囲気を追加します。
リアル感を出すためのコンテキスト: 信頼性のあるアクション、相互作用、環境を含め、シーンを現実味のあるものにします。

追加の注意点

柔軟性: すべての入力語を使用する必要はありません。代わりに、最も良い視覚的出力に寄与する単語を選びましょう。
アイデア出し: 「基本」および「創造的」フェーズでは、アイデアを探るために長いプロンプトも推奨されます。
批判的推論:
- 各フェーズで何がうまくいき、何がうまくいかなかったかを指摘してください。
- 決定や編集の理由を明確に説明してください。
- プロンプトを視覚的に印象的で、魅力的、かつユーモラスに保ちましょう。

出力フォーマット

以下のJSON形式で回答を提供してください：

JSON

{
  "basic": {
    "reasoning": "このフェーズの説明",
    "prompt": "長めのアイデア出し用プロンプト。必ず「an icon of trpfrog」で始めること。"
  },
  "creative": {
    "reasoning": "このフェーズの説明",
    "prompt": "より創造的で長めのバージョン。「an icon of trpfrog」で始めること。"
  },
  "polished": {
    "reasoning": "このフェーズの説明",
    "prompt": "約15語の洗練されたバージョン。「an icon of trpfrog」で始めること。"
  },
  "final": {
    "reasoning": "このバージョンが最適である理由",
    "prompt": "10語以内の簡潔で魅力的なバージョン。「an icon of trpfrog」で始めること。"
  },
  "translated": "最終プロンプトの日本語訳。「an icon of trpfrog」は「つまみさんの画像」とすること。"
}

TypeScript

import { HfInference } from '@huggingface/inference'

const hf = new HfInference(process.env.HUGGINGFACE_TOKEN)

export async function generateTrpFrogImage(prompt: string) {
  const responseBlob = await hf.textToImage({
    model: 'Prgckwb/trpfrog-sd3.5-large-lora',
    inputs: prompt,
  })
  const arrayBuffer = await responseBlob.arrayBuffer()
  const base64 = Buffer.from(arrayBuffer).toString('base64')

Text

{
  "basic": {
    "reasoning": "このフェーズの説明",
    "prompt": "長めのアイデア出し用プロンプト。必ず「an icon of trpfrog」で始めること。"
  },
  "creative": {
    "reasoning": "このフェーズの説明",
    "prompt": "より創造的で長めのバージョン。「an icon of trpfrog」で始めること。"
  },
  "polished": {
    "reasoning": "このフェーズの説明",
    "prompt": "約15語の洗練されたバージョン。「an icon of trpfrog」で始めること。"
  },
  "final": {
    "reasoning": "このバージョンが最適である理由",
    "prompt": "10語以内の簡潔で魅力的なバージョン。「an icon of trpfrog」で始めること。"
  },
  "translated": "最終プロンプトの日本語訳。「an icon of trpfrog」は「つまみさんの画像」とすること。"
}

TypeScript

// キャッシュから取得
const key = 'latestImageMetadata'
await c.env.KV.put(key, JSON.stringify(metadata))

// キャッシュから取得
const rawData = await c.env.KV.get(key)
const metadata = myValidateFn(JSON.parse(rawData))

つまみログ

つまみネット

バックエンドでの処理

最新画像のメタデータ取得 (GET /icongen/current/metadata)

キャッシュ

メタデータの検索 (GET /icongen/query)

‌

‌

つまみログ

AIつまみアイコンを支える技術 (Webアプリ実装編)

AIつまみアイコンを支える技術 (Webアプリ実装編)

Bun + TypeScript でブックマークレットの開発体験を高める

Satori に Google Fonts を使う

コードはAIと書いた方が良い

オタクのHPが見たすぎる

Disnake + GitHub Actions で作るオタク鯖晒しサイト

おうちMac+PythonでLINE botを作る

バックエンドでの処理

最新画像のメタデータ取得 (GET /icongen/current/metadata)

キャッシュ

メタデータの検索 (GET /icongen/query)

画像生成 (POST /icongen/update)

ランダムなプロンプトの生成

画像を生成する

Next.js の API Routes を使わずに Cloudflare Workers を使った理由