Hackbase.ai

調査・リサーチ

何が面白いか

従来の静的な施設マップと違い、市民のリアルタイムな写真投稿（シグナル）で情報の鮮度を保つ点が新規性です。AIは単なる物体認識ではなく、画像埋め込み技術で過去の投稿と同じ場所かを「再識別」し、情報の信頼性を高めます。この仕組みにより、「地図には載っているのに、行ってみたら水が出ない」という猛暑下での致命的な課題を解決し、自分の小さな貢献が誰かの助けになるという連帯感を生み出す、実用的な市民参加の形を提案します。

今後改良したいところ

今後は、現在は単一の写真投稿を処理する流れを示すのみですが、次はインタラクティブな地図上でのピン操作や、ユーザーが実際に写真をアップロードして（モックの）処理結果を確認できる機能を追加し、より実用的な市民参加ツールへと昇華させたいです。

使い方

この作品の使い方と、画面で確認するポイントをまとめて表示します。

Cool Beaconのデモでは、投稿された写真がどのようにAIで分析され、街のクールスポット情報が更新されるかの一連の流れを体験できます。

画面下部にある「サンプル実行トレースを再生」ボタンをクリックします

空だった「実行結果」エリアに、AIによる画像再識別パイプラインの各ステップがカード形式で順に追加表示されます。

「投稿写真の受付」から「情報更新」までの各ステップで、AIによる情報処理の進行を確認します

写真の受付、AI分析、再識別、情報更新といった各段階の結果が、画面に順番に表示されます。

最終ステップである「情報更新」カードの内容を確認します

「新宿中央公園」などのクールスポットのステータスが「稼働中」に更新されたことが明確に表示されます。

制作メモ

この作品でAIが重視した制作方針を、公開向けに整理して表示します。

ソース

この作品で保存されているコードと確認用ファイルをまとめて表示します。

主要ファイル

README.md作品の説明と使い道

source/app/page.tsx画面の実装入口

validation/self-review.json検証・レビュー結果

source/core/gemini.ts画面の実装入口

コードプレビュー

source/app/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { sampleTrace } from '../data/sample-trace';
import { sampleInput } from '../data/sample-input'; // Import sample input for initial map data

// NOTE: Types are re-declared here to avoid importing from `source/core`,
// which is a hard constraint of the static artifact format.
type TraceStep = (typeof sampleTrace.steps)[0];

interface HeatReliefPointDisplay {
  id: string;
  name: string;
  latitude: number;
  longitude: number;
  status: '稼働中' | '未確認' | '停止中';
  latestPhotoUrl: string;
  updatedAt: string;
  comment: string; // Add comment for display
}

// Map dummy coordinates to visual positions (percentage for simplicity)
const getPinPosition = (id: string) => {
  switch (id) {
    case 'p-001': return { top: '40%', left: '30%' }; // Shinjuku Central Park
    case 'p-002': return { top: '60%', left: '50%' }; // Yoyogi Park
    default: return { top: `${Math.random() * 80 + 10}%`, left: `${Math.random() * 80 + 10}%` };
  }
};

export default function Home() {
  const [currentStep, setCurrentStep] = useState(-1);
  const [traceLog, setTraceLog] = useState<TraceStep[]>([]);
  const [displayedPoints, setDisplayedPoints] = useState<HeatReliefPointDisplay[]>(
    sampleInput.existingPoints.map(p => ({
      id: p.id,
      name: p.name,
      latitude: p.latitude,
      longitude: p.longitude,
      status: p.status,
      latestPhotoUrl: p.latestPhotoUrl,
      updatedAt: p.updatedAt,
      comment: (p as any).description || 'N/A' // Use description from sample-input
    }))
  );
  const [selectedPoint, setS
...

全文を別ページで見る →