デジタルサイネージ風イラスト展示アプリ (Supabase版)

AI Illustration Exhibition Applicationアプリは、Supabaseを使用してAIイラストをリアルタイムにスライド表示します。
元々はAI展示会を開催していたのですが、昼頃にふとデジタルサイネージ風に画像をスライド化したら、画像を印刷しなくても見せられるなと思い、1時間ほどで作成したものです。
大き目のモニターを利用してF11で画面を全画面表示していただければ、社内や売り場のデジタルサイネージとしてご利用いただけます。

技術仕様

• UI: ダークテーマ、30秒オートスライド
• バックエンド: Supabase (Database, Storage)

セットアップ手順

1. Supabaseプロジェクトの準備

1. Supabase でプロジェクトを作成します。

2. Database (テーブル作成):
   SQL Editorで以下のコマンドを実行してテーブルを作成します。

   create table exhibition (
     id uuid default gen_random_uuid() primary key,
     title text not null,
     url text not null,
     created_at timestamp with time zone default timezone('utc'::text, now()) not null
   );
   
   -- リアルタイム機能を有効にする
   alter publication supabase_realtime add table exhibition;
   

3. Storage (バケット作成):

   • Sidebarの「Storage」を開き、artworks という名前のバケットを作成します。
   • 「Public」に設定してください（デモ用）。

2. ポリシーの設定 (重要)

誰でも登録・閲覧できるようにするには、RSL (Row Level Security) のポリシー設定が必要です。

• Database (exhibitionテーブル):
  • INSERT ポリシー: 全ユーザーを許可
  • SELECT ポリシー: 全ユーザーを許可
• Storage (artworksバケット):
  • INSERT ポリシー: 全ユーザーを許可
  • SELECT ポリシー: 全ユーザーを許可

3. 設定ファイルの書き換え

1. Supabaseの「Settings > API」を開きます。
2. Project URL と anon public キーをコピーします。
3. app.js 内の以下の部分に貼り付けてください：

   const SUPABASE_URL = 'あなたのURL';
   const SUPABASE_ANON_KEY = 'あなたのANON_KEY';
   

起動方法

npx serve .

ブラウザで index.html を開いてください。

デプロイ版（私のイラストがデフォルトで入っています）
https://storage.googleapis.com/digital-signage-488401/index.html
ダウンロード版（社内で使用する時はこちらをお使いください）
https://gitlab.com/sugerpowderflower/digital-signage
ダウンロード方法
青いcodeボタンを押し、downloadを選択してください。