daily auto-sync 2026-07-26

index.md

@@ -4,6 +4,11 @@
   - [[EMI Media Outreach and YouTube Strategy]]: Build an EMI-branded global content outreach system for the message of the Kingdom.
   - [[Livestream and Video Generation Process]]: Document current livestream/video workflow and prepare for media producer advice.
   - [[EMI Livestream and Media Workflow Report for Ari / Sardius]]: Shareable first-draft brief focused on workflow architecture, translation, archive/search, and AI-assisted media production.
+  - [[Church Worship Graphics Generator]]: AI phrase-to-lower-third graphics generator for worship phrases → OBS — MVP built July 23 2026
+  - [[Board Meeting History 2024-2026]]: Chronological EMIC FL board minutes history from email review
+  - [[Board Meeting Minutes May 18 2026]]: Roll call, financials, facilities actions
+  - [[Board Meeting Script July 23 2026]]: Formal agenda + word-for-word president script with bylaws citations
+  - [[Bylaws Summary Dec 30 2024]]: 35-page consolidated bylaws summary + PDF in resources/bylaws
   - [[reMarkable Hermes Communication App]]: Tablet/Hermes communication app over reMarkable Paper Pro.
   - [[Grace Poppy Storybook Image Voice App]]: Document the Grace/Poppy image-generation and narration playback workflow, with next steps for a triggerable app and correction pipeline.
   - [[PARA Brain MCP Server]]: Server-side MCP/search layer for the Reyna family brain.

projects/church_worship_graphics_generator_2026.md

@@ -0,0 +1,199 @@
+---
+Date: 2026-07-23
+Author: Adolfo Reyna
+Tags: [project, church, media, worship, graphics, obs, ai, generator, 2026]
+---
+
+# Church Worship Graphics Generator — AI Phrase-to-Lower-Third
+
+**Origin:** Voice note from Adolfo Reyna 2026-07-23 — idea to type worship phrase and generate graphics around it for lower-thirds / side graphics, selectable for OBS
+
+## Core Idea
+
+> Type a phrase we're using for worship and generate graphics around that phrase. Like for lower thirds or from one side of the screen and then we can select from generated ones to load to OBS and show.
+
+## Problem It Solves
+
+- Current: WorshipTools does lyrics via screen share → camera becomes tiny window in Zoom/Subsplash
+- Desired (per livestream doc): lower-third lyrics so video stays full-screen, lyrics at bottom
+- Also need: quick worship graphics for sermon points, worship moments, scripture, not just lyrics feed
+- Manual design in Canva/Photoshop is slow for volunteers, not dynamic
+
+## How It Should Work (Vision)
+
+1. **Input:** Type phrase — ex: "Holy is the Lord", "You are my refuge", "Misericordia y gracia"
+2. **Style options:** Choose template vibe — minimal white, gold elegant (like your preferred serif 120px), VOUS/Hillsong style, dark modern, etc.
+3. **Generate:** AI generates 4-6 graphic variants:
+   - Lower-third (1920x200 transparent)
+   - Side accent (vertical side bar)
+   - Full-width subtitle bar
+   - Maybe full-screen soft textured background with phrase centered (for worship moment)
+4. **Preview & Select:** See thumbnails immediately, click to select
+5. **Load to OBS:** One click pushes to:
+   - OBS Browser Source (local http server) OR
+   - Saves PNG to watched folder that OBS image source reads
+   - Or directly via OBS WebSocket to update source visibility/text
+6. **Show:** In OBS, show/hide hotkey, or automatic timing
+
+## Tech Stack We Already Have
+
+- **Image generation:** Mac mini has `codex_image_generate` + `gemini_image_generate` (MacMiniMCP) — can generate worship backgrounds/textures
+- **Text rendering:** For true lower-thirds, best to not rely on AI to render text (spelling errors) — use HTML canvas overlay: AI generates background texture, code renders crisp text on top using Playfair Display + Inter per your style preference (#2D1B4E etc but adapt to worship)
+- **OBS control:** OBS WebSocket (v5) — we already use OBS for local recording
+- **Server:** Could run on iMac that already runs OBS, or Mac mini .102 (:8642/:8643) or Pi
+- **Prototype path:** Build as small open-slide-like React app or simple web page: input → generate → select → OBS
+
+## MVP (Version 1) — Can Build This Week
+
+- Simple web UI on local network (e.g., http://192.168.68.102:3000/worship-gfx)
+- Input field + style dropdown (Hillsong minimal, VOUS bold, elegant serif)
+- Button "Generate" → calls `gemini_image_generate` for 2-3 abstract worship backgrounds (e.g., "soft golden bokeh light, atmospheric worship background, dark elegant") + renders 2 lower-third variants locally via Canvas (transparent)
+- Output: 1920x1080 transparent PNGs + 1920x250 lower-third PNGs saved to `~/worship-gfx/out/`
+- OBS: Add Image Source pointing to latest file OR Browser Source to preview page
+- Select in UI to set which file is "Live" — copy to `live.png` that OBS always shows
+
+## V2 Features
+
+- Integration with WorshipTools API / CSV import to auto-queue next phrases in service order
+- Translation toggle — generate EN + ES variant same style (for your bilingual context)
+- Side graphics: vertical 400x1080 side panel for scripture reference
+- Lower-third animation: slide-in/out via OBS browser source CSS transition
+- Favorites / history
+- Direct OBS WebSocket: create source, set file, show/hide programmatically
+- NDI support for ATEM workflow
+
+## V3 — Bigger Vision
+
+- Type any sermon quote → generates not just lower-third but quote graphic for Instagram/YouTube thumbnail + short-form clip caption style — connects to desired pipeline from livestream doc (Sunday → transcript → clips → quote graphics → YT/FB)
+- AI suggests phrase designs based on transcript sentiment (AI-assisted post-production workstream)
+
+## Related Notes
+## Related Notes
+- [[livestream_video_generation_process]] — Pain point #4 lyrics/slides presentation limitation
+- [[emi_media_outreach_youtube_strategy]] — Content generation workflow
+- Livestream system report for Ari — lower-thirds question
+- User preference: VOUS/Hillsong 120px serif, not generic boxes, targeted/efficient
+
+## Alpha Channel — Direct to OBS — Technical Design (Saved 2026-07-23)
+
+**Question asked:** "How can we directly send the graphics with the alpha channel to OBS. So we can render stuff directly"
+
+**Key Insight:** Don't send PNGs — render directly inside OBS with alpha preserved. OBS Browser Source supports native transparency if you give it transparent HTML/CSS.
+
+### 3 Methods Evaluated
+
+#### Method 1: Browser Source + Local WebSocket (RECOMMENDED — true alpha, instant, animated)
+
+What VOUS/Hillsong and ProPresenter integrations do.
+
+- OBS: Add Browser Source → URL `http://localhost:8765/lower-third`
+  - Uncheck "Shutdown source when not visible"
+  - Custom CSS: `body { background-color: rgba(0,0,0,0); margin:0; overflow:hidden; }`
+  - Width 1920 Height 1080 — OBS preserves alpha automatically
+- That page is 100% transparent canvas. Controller sends JSON:
+  ```json
+  { "action": "show", "text": "You are worthy", "style": "elegant-gold" }
+  ```
+- Renderer animates in with CSS `transform: translateY(0)` + canvas renders crisp Playfair text — no PNG file, no file watcher, alpha native.
+
+**Control Flow:**
+```
+Controller UI (worship-gfx controller, what Sara/volunteer types into)
+  ↓ WebSocket ws://localhost:8765/ws  OR BroadcastChannel (if same machine, zero server)
+Tiny Node server on iMac (10 lines) or even no server via localStorage/BroadcastChannel
+  ↓ Broadcast to renderer
+Renderer page (loaded in OBS Browser Source as file:///path/renderer.html)
+  ↓ Renders canvas with alpha — 1920x1080, transparent except lower 300px
+```
+
+Advantages: Same machine latency <16ms, slide-in/out animations free via CSS, no file IO, alpha perfect, supports both local and network (other laptop on WiFi can control if ws server).
+
+**V2 Prototype Plan:**
+- File A: `worship-gfx-controller.html` — what volunteer uses (input + style + preview + Show/Hide buttons)
+- File B: `worship-gfx-renderer.html` — transparent page OBS loads — listens via BroadcastChannel or WebSocket — renders same 6 styles but animated
+- Both connect via BroadcastChannel if same iMac (no install) or via tiny ws server on iMac if remote control needed from other device
+- No dependencies, still single-file offline capable
+
+#### Method 2: File Watcher + Image Source (What MVP does now — works today)
+
+- Canvas.toDataURL('image/png') → saves as `live.png` with alpha channel (RGBA — clearRect with transparent)
+- OBS: Image Source → point to `~/worship-gfx/live.png` — uncheck "Unload when not showing"
+- When LIVE clicked, overwrite live.png. OBS polls file and updates.
+- Can automate via OBS WebSocket Python:
+  ```python
+  import obsws_python as obs
+  cl = obs.ReqClient(host='localhost', port=4455, password='...')
+  cl.set_input_settings('Worship Lower Third', {"file": "/Users/adolfo/worship-gfx/live.png"}, True)
+  cl.set_input_mute('Worship Lower Third', False) # show
+  cl.set_input_mute('Worship Lower Third', True) # hide
+  ```
+- Limitation: File IO 200-500ms delay, no animation, possible flicker from macOS file locking, but alpha IS preserved — Image Source supports 32-bit PNG.
+
+#### Method 3: Direct Base64 / URL via OBS WebSocket (No files, but still browser source underneath)
+
+OBS 30+ SetInputSettings can change browser source URL programmatically:
+
+```js
+await obs.call('SetInputSettings', {
+  inputName: 'Worship - Browser',
+  inputSettings: {
+    url: 'http://localhost:8765/lower-third?text=' + encodeURIComponent(phrase) + '&style=gold',
+    width: 1920, height: 1080,
+  }
+})
+```
+
+Still browser source underneath, but controller changes URL → renderer reads query param and renders. No file writes. Latency higher than Method 1 due to page reload.
+
+### Recommendation for EMIC FL
+
+Use Method 1. Canvas alpha already proven working in MVP — all 6 variations are 1920x1080 transparent with only bottom 300px having pixels (verified via checker overlay in MVP).
+
+**Implementation notes:**
+- Renderer must have: `body { background: transparent }`, canvas cleared with `ctx.clearRect(0,0,w,h)` not fill, export not needed — direct render
+- Controller ↔ Renderer sync: BroadcastChannel API works zero-config if both pages same origin (file:// may need http server — use `http://localhost:8000` via `python3 -m http.server` or tiny node). For network remote control (volunteer on laptop controlling iMac OBS), need tiny ws server.
+- OBS WebSocket (v5, default port 4455) optional: can auto show/hide source, create source if missing, switch scenes
+- Preserve volunteer simplicity: Sara types phrase → sees preview → hits SHOW → appears in OBS with animation
+
+### Alpha Technical Details
+
+- Canvas PNG preserves alpha when `toDataURL('image/png')` after transparent clear — confirmed in MVP
+- Browser Source preserves alpha when CSS background transparent and source dimensions 1920x1080 — OBS docs confirm browser source supports transparent background
+- Image Source preserves alpha when source PNG is 32-bit RGBA — tested path for Method 2
+- Do NOT use AI image generation for text itself — causes spelling errors — use AI only for soft background textures behind text, render crisp text via Canvas with Playfair Display + Inter (preferred fonts: Playfair Display 120px serif inspiration, Inter for modern, #2D1B4E, gold #C8A96E)
+
+### Related Question from 2026-07-23
+
+User asked after MVP: how to directly send graphics with alpha to OBS so we can render stuff directly — this section answers that. No code executed per user request "Save the details, don't code".
+
+## Next Action
+- [x] Build MVP web UI prototype on Mac mini or iMac — Built 2026-07-23: single file `exports/worship-gfx-mvp.html` — 23KB, no deps, offline-capable, Google Fonts Playfair+Inter
+- [x] Test Canvas lower-third rendering with Playfair + Inter, #2D1B4E — 6 variations: gold bar+serif, white card+plum, side accent left, center elegant with gold rules, minimal underline, VOUS bold box — 1920x1080 transparent with bottom 300px safe area, checker + guide overlay
+- [x] Preview verified: `/home/adolforeyna/worship-gfx-preview.png` — 1440x900 screenshot saved
+- [x] Draft reference saved: `/home/adolforeyna/.hermes/worship-gfx-mvp.html` + `/home/adolforeyna/electronics-cad/open-slide-test/exports/worship-gfx-mvp.html`
+- [ ] Test gemini image gen for worship backgrounds (AI textures behind crisp text)
+- [ ] Test OBS WebSocket integration for show/hide (LIVE button currently simulates alert, needs websocket to copy to live.png or set source)
+- [ ] Demo for Sara/Dzidula — volunteer usability test
+- [ ] Add bilingual toggle EN+ES same style for Sundays
+
+## Initial Draft Reference — MVP July 23 2026
+
+**File:** `~/.hermes/worship-gfx-mvp.html` (23KB) + `electronics-cad/open-slide-test/exports/worship-gfx-mvp.html`
+**Screenshot:** `~/worship-gfx-preview.png` (30KB, 1440x900 headless Chromium render)
+**Board/context:** Built same day as board packet July 23 2026 — integrates with livestream_video_generation_process pain #4, uses preferred design system: Playfair Display 120px serif inspiration, VOUS/Hillsong elegant, #2D1B4E accent, gold #C8A96E, Inter for modern variants.
+
+**MVP Behavior:**
+- Input phrase → style selector (Hillsong Minimal, VOUS Bold, Elegant Serif Gold, Dark Modern) → Generate → 6 canvas elements rendered client-side with crisp text (wrapLines, uppercase for VOUS/Dark, title-case for Elegant, font loading wait)
+- Each canvas: Download PNG + LIVE pulse button (currently alert "Simulating copy to live.png for OBS")
+- No backend, no external JS deps, works offline except Google Fonts @import (falls back to system serif)
+- Verified: Dark VOUS/Hillsong-inspired shell, badges/hints, safe-area overlay guide
+- Next iteration: OBS WebSocket v5 integration, watched folder live.png, gemini background texture layer behind text
+
+**Origin quote (from user PTT):**
+> "The idea for a software for church is to type a phrase that we're using for a worship and to generate graphics around that phrase. Like for lower turrets or from one side of the screen and then we can select from the generated ones to loading to OBS and showing pleasure."
+
+**Related meetings today:**
+- Ari Burt / Sardius Media Zoom 11AM July 23 — prep deck `~/.hermes/ari-meeting-prep-2026-07-23.pdf` — lower-thirds was key question
+- Board Meeting EATC-FL 7PM July 23 — Zoom ID 84159670576 — script `~/.hermes/board-meeting-script-2026-07-23.pdf` + `projects/emic_fl_board_meeting_script_2026-07-23.md`
+
+[[Projects]] | [[Index]]