つまみログ

つまみネット

←13 4 →

フロントエンドでの処理

フロントエンドはユーザーが「見る」部分です。「見た目」「操作性」「動き」など、ユーザーが直接触れる部分を担当します。

つまみネットでは React のフレームワークである Next.js を使ってフロントエンドを実装しています。

トップページ

画像を表示するカードは次のような流れで表示しています。

バックエンドに最新の画像を取得するリクエストを送り、画像を表示
画像を更新するリクエストを送る
- このとき最小アップデート間隔を超えていたら画像を更新する

シーケンス図は以下の通りです。

このシーケンス図は、処理の流れを図で表したものです。

メタデータ

シーケンス図にあるメタデータとはなんでしょう？ここでは「画像生成に用いたプロンプト」「生成日」「画像のURL」などの情報を格納しています。つまり、画像に関する様々な情報が入ったデータのことです。

実際にリクエストを送ってメタデータがどんなものか見てみましょう。

この情報を使って画像を表示しています。いわゆる JSON 色付け職人の作業です。私は JSON 色付け大好きです。一番楽しいかも、成果を目で確認できるのが良い！

←13 4 →

‌

‌
‌
‌

‌

‌
‌
‌

‌

‌
‌
‌
‌
‌
‌
‌
‌

‌

‌
‌
‌
‌
‌
‌
‌
‌

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

BFFのコード

'use server'

export async function requestUpdateIcon() {
  const apiKey = process.env.TRPFROG_FUNCTIONS_SECRET
  // API キーを使ってリクエスト
  await client.update.$post({ header: { 'x-api-key': apiKey } }) 
}

バックエンドのコード

.get(
  '/query',  
  requiresApiKey(), 
  zValidator(
    'query',
    z.object({
        // 検索ワード
        q: z.string().optional(),  
        // 取得する数
        limit: z.coerce.number().int().positive().max(100).optional(), 
        // 何番目以降のデータを取得するか
        offset: z.coerce.number().optional(),  
      })
      .strict(),
    (c) => {

BFFのコード

'use server'
import { z } from 'zod' // データの形式を検証するためのライブラリ

// バリデータ
const fetchImageRecordsQuerySchema = z.object({
  // ページ番号
  page: z.number().int().positive(),  
  // 1ページあたりの表示件数 (デフォルト 20)
  iconsPerPage: z.number().int().positive().max(20).default(20),  
})

// クエリの型
export type FetchImageRecordsQuery = z.input<typeof fetchImageRecordsQuerySchema>

// Server Action
export async function fetchImageRecords(rawQuery: FetchImageRecordsQuery) {
  // バリデーション (この関数はユーザから直接叩かれる可能性があるため)
  const query = fetchImageRecordsQuerySchema.parse(rawQuery)   

  // BFF からバックエンドにリクエストを送る
  const { result, total } = await client.query   
    .$get({
      query: {
        limit: query.iconsPerPage.toString(),
        offset: ((query.page - 1) * query.iconsPerPage).toString(),
      },
      header: {
        'x-api-key': env.TRPFROG_FUNCTIONS_SECRET ?? '',
      },
    })
    .then(res => res.json())

  // 結果の配列, 合計レコード数, ページ数
  return { result, total, numPages: Math.ceil(total / NUM_ICONS_PER_PAGE) }
}

ブラウザ側のコード

import { useEffect } from 'react'
import { requestUpdateIcon } from './actions'

export function IconFrame() {
  // 略

  // 更新リクエストを送る
  useEffect(() => { 
    requestUpdateIcon().catch(console.error) 
  }, []) 

  // 略

  return (
    <figure>
      {/* 略 */}
    </figure>
  )
}

ブラウザ側のコード

import { useCallback } from 'react'
import useSWR from 'swr' // データを効率的に fetch するためのライブラリ
import { IconRecord } from './IconRecord'
import { fetchImageRecords, FetchImageRecordsQuery } from './actions'

// 画像一覧を取得
function useImageRecords(query: FetchImageRecordsQuery) {
  // BFF を叩く関数
  const fetcher = useCallback(() => fetchImageRecords(query), [query])   
  const key = `useImageRecords-${JSON.stringify(query)}`

  // 実際にデータをとってくる
  return useSWR(key, fetcher, {
    // 前に取得したデータを保持する (ちらつき防止)
    keepPreviousData: true,
  })
}

// アイコン一覧を表示するコンポーネント
function Icons() {
  const page = ...; // ?page=1 で表されるページ番号を URL から取得

  // 画像一覧を取得
  const res = useImageRecords({ page })   
  if (res.error) return <div>Error</div>
  if (res.isLoading && !res.data) return <div>Loading...</div>

  // 画像一覧
  const images = res.data.result

  // 画像一覧を表示
  return (
    <div className="tw-flex tw-flex-col tw-gap-4">
      {images.map(image => (
        <div>
          <img src={image.imageUri} alt="AI生成画像" aria-describedby={`prompt-${images.id}}`} />
          <div id={`prompt-${images.id}}`}>
            <p>{image.prompt.text}</p>
            <p>{image.prompt.translated}</p>
          </div>
        </div>
      ))}
    </div>
  )
}

Request

{
  "id": "0193e77d-56f9-7fb3-8986-3ae9861c74b5",
  "prompt": {
    "author": "gpt-4o-2024-11-20",
    "text": "an icon of trpfrog bouncing on a swan with rice and eggshells",
    "translated": "つまみさんが白鳥に乗って弾みながら、米と卵の殻に囲まれている画像"
  },
  "modelName": "Prgckwb/trpfrog-sd3.5-large-lora",
  "createdAt": "2024-12-21T04:32:50.580Z",
  "imageUri": "https://media.trpfrog.net/ai-icons/2024-12-21-04-32-50.jpeg"
}

つまみログ

つまみネット

フロントエンドでの処理

トップページ

メタデータ

‌

‌

つまみログ

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

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

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

Satori に Google Fonts を使う

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

オタクのHPが見たすぎる

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

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

フロントエンドでの処理

トップページ

メタデータ

画像更新のリクエスト

画像一覧ページ

BFF で /icongen/query をラップする