摄影与录像模板
Glimmer AI Photo Effects and Portrait Studio App
An Expo app for AI photo effects and headshots: pick a look, add one photo, get a set to compare and share. Gemini edits run through a Supabase Edge Function and are paid for in credits.
- 19 个界面
- iOS 和 Android
- 示例数据
- 更新于 2026年11月4日
- 已验证版本
免费复制 · 完整源码 · 无需信用卡
界面
来自实际运行应用的 6 个界面。
包含内容
- 14 effects and 4 headshot styles with real before/after sample results of six AI-generated people
- Drag-to-compare before/after on the feed hero, effect pages and every result
- Gemini image edits through a Supabase Edge Function, one image per call, so progress is real
- Headshot sets of 8 made in the background from 6 to 10 selfies, which are deleted when the set is done
- Credits ledger in Postgres: welcome and Pro monthly grants, packs, and a spend and refund per image
- Likeness rules: consent once, and a check that refuses minors, public figures and explicit photos
关于此模板
Overview
Glimmer is a dark, photo-led AI photo studio in the style of Remini or Lensa. People pick an effect (oil portrait, film noir, cel shade, comic pop, Super 8 and more), add one photo of themselves, choose how many variations and what shape, and get a set they can compare with the original, label as AI-edited and share. Headshots turns 6 to 10 selfies into a set of 8 studio portraits.
It is an Expo SDK 57 / React Native app on the FluxNative kernel, with a Supabase backend: the AI runs in one Edge Function that calls Gemini with your key, and credits are kept in your own Postgres tables.
Key features
Effects feed with a self-sweeping before/after hero, trending cards, kinds as chips and every effect with its uses and price.
Two-step create: effect and photo (library, camera or the sample photo), an AI photo check in plain words, then variations, shape and a one-time likeness agreement.
An honest wait screen: place in line, images landing one by one, named steps, Stop with a confirmation; refusals and failures each have a designed end with the credits given back.
Results with drag-to-compare, favourites, a full-screen viewer, Run it again at its price, and Share with an "AI-edited" label switch (on by default).
My studio: sets being made now with real progress, every set by date, filters by effect or favourites, unfinished runs with credits back.
You: balance with a 7-day chart, Pro, photo rules and data, Delete my photos and data, reminders for headshot sets, purchases and legal pages.
Screens
18 screens: Welcome, a three-step intro (ending on the likeness rules), Effects, effect detail, Create, Options, Headshots, the wait screen, Results, a full-screen viewer, My studio, You, Credits, Pro (paywall), Photo rules and data, Terms, Privacy and About.
AI and backend
Tasks in supabase/functions/ai/tasks.ts: photo-check (free), apply-effect (2 to 4 credits an image), headshot-selfies and headshots (10 credits a set, made in the background), headshots-resume, credits and claim-credits.
Gemini image models edit the person's own photo; prompts for each effect live in supabase/functions/ai/effects.ts with the same ids and prices as the app's catalog.
The migration adds creations and credit_ledger with row-level security, and security-definer functions to grant, spend (with a per-user lock), refund and add packs; only the function can move credits.
No accounts: the app signs each install in anonymously. Uploaded selfies are deleted from storage when a set is done; Delete my photos and data removes every set and file.
Sample mode: with a blank .env every screen works on bundled sample content. The six sample people and all their results are AI-generated (fictional adults); CREDITS.md lists the model and prompt of every image.
Monetisation
Credits pay for each image (new people get 6). Credit packs (30, 80, 200) are consumables in a RevenueCat offering named credits; the server checks each purchase with RevenueCat before adding its credits. Glimmer Pro (weekly or yearly, entitlement pro) adds 120 credits a month and allows 4 variations per run instead of 2. Until you connect RevenueCat to sell, the paywall and Credits show sample prices and say subscriptions open in the App Store version.
Setup
Connect Supabase and apply the two migrations, add your Gemini key and deploy the functions, then connect RevenueCat with the Pro products and the credit packs. Each step below has a prompt your coding agent can run.
你将获得
- 完整源码 — 使用 TypeScript 的 Expo 和 React Native,作为你工作区中的一个应用。
- 实时预览 — 在浏览器或手机上试用每项更改。
- 已验证版本 — 可编译,每个界面都能无错误打开。
- AI 助手 — 用聊天修改任何内容;每次修改会消耗积分。
- 构建与上架 — iOS 和 Android 构建,从发布页发送到 App Store 和 Google Play。
- 复制不耗积分 — 复制本身不收费。
使用当前版本的 FluxNative 制作。
你需要什么
- FluxNative 账号 — 免费套餐最多可有 2 个应用。
- 无需先接后端 — 在你连接自己的后端之前,它使用示例数据运行。
- Creator 或更高套餐 — 用于原生构建和上架。
- 商店账号 — Apple Developer Program(每年 99 美元)和 Google Play(一次性 25 美元),用于发布。
源码里有什么
- 个界面
- 19
- 个文件(副本中)
- 423
- 行为此应用编写的代码
- 6,860
- 个现成 UI 组件
- 142
应用文本语言:英语和越南语
技术栈
- Expo SDK
- 57.0.22
- React Native
- 0.86.3
- React
- 19.2.8
- TypeScript
- 6.0.3
- Expo Router
- 57.0.21
- Supabase JS
- 2.112.3
- RevenueCat
- 10.9.1
来自此版本的 package.json。
设计系统
- 标题
- Plus Jakarta Sans
- 正文
- 系统字体
- 仅深色模式
- Liquid Glass
- 胶囊按钮
- 媒体卡片
复刻后的设置
你的副本会和构建它的 AI 助手一起打开。按顺序完成步骤:某一步需要连接的内容,请在 Server 中连接,然后发送每条提示词。
Connect Supabase
Server › Backend › Supabase. Apply both migrations, turn on anonymous sign-ins in the Supabase dashboard (Authentication › Sign In / Providers), and write the public URL and anon key to .env.
给 AI 的提示词Connect this app to my Supabase project from Server › Backend › Supabase and write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Apply supabase/migrations/20261019000000_ai_kit.sql, then supabase/migrations/20261019120000_glimmer.sql (creations, the credit ledger and its functions, effect_uses, Delete my data). Remind me to turn on Authentication › Sign In / Providers › Allow anonymous sign-ins in the Supabase dashboard, since the app signs each install in anonymously, and to keep the anonymous sign-in rate limit per IP low. Then confirm the Effects tab no longer shows the sample line and My studio starts empty.
Turn on the AI
Server › API keys & secrets: add GEMINI_API_KEY (a billed Google AI Studio project; image models have no free tier), then deploy the ai function and push its secrets.
给 AI 的提示词Add my Gemini key as GEMINI_API_KEY under Server › API keys & secrets. Deploy the ai Supabase Edge Function and push its secrets. Glimmer charges its own credits, so leave AI_FREE_UNITS_PER_DAY and AI_PRO_UNITS_PER_DAY unset. Then invoke the function as a test user with { "task": "credits" } and tell me the balance it returns (6 welcome credits for a new user), and with { "task": "photo-check" } on one of the sample photos in assets/samples/people to check the vision model answers.
Sell Pro and credit packs
Server › Monetization: RevenueCat products for Pro (weekly, yearly) and the three credit packs, the public SDK keys, the webhook secret and REVENUECAT_SECRET_KEY.
给 AI 的提示词Connect RevenueCat under Server › Monetization. Create the entitlement pro and a current offering with glimmer_pro_weekly and glimmer_pro_annual, and an offering named credits with the consumables glimmer_credits_30, glimmer_credits_80 and glimmer_credits_200 (the number is the credits each adds). Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env and update PLAN_PREVIEW and PACK_PREVIEW in src/services/iap/index.ts to the same prices. Save a long random REVENUECAT_WEBHOOK_SECRET and a RevenueCat v1 secret API key as REVENUECAT_SECRET_KEY under Server › API keys & secrets, deploy the revenuecat-webhook function with JWT verification off and redeploy ai, and give me the webhook URL and the Authorization header value to paste into RevenueCat › Integrations › Webhooks.
Set your prices and effects
Optional. Effect prices, welcome and Pro monthly credits live in the server's ai function (functions/ai/effects.ts) and src/services/effects/catalog.ts; change both together.
给 AI 的提示词Show me the effects, their credit prices, the welcome credits (6) and Pro's monthly credits (120) from the server's ai function (functions/ai/effects.ts) and src/services/effects/catalog.ts. Apply the prices I give you in both files with the same ids, keep the server's effect prompts in step with any effect I rename or add, redeploy the ai function, and update the credit figures shown on the Pro and Credits screens.
Set your icon, store IDs and legal pages
Name, icon, colours and legal page URLs: app.json name and bundle id, assets/icon.svg, the seed in src/theme/brand.ts, and the privacy, terms and support URLs in .env.
给 AI 的提示词Rename the app to the name I give you in app.json (name, slug, scheme, bundle id and package) and in the copy that says Glimmer. Redraw assets/icon.svg and assets/adaptive-icon.svg for my brand and render icon.png, adaptive-icon.png, favicon.png and splash-icon.png from them. Change brandSeed in src/theme/brand.ts to my colour. Write my EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL to .env, and replace the sample text in src/features/legal with my own terms and privacy policy.
如何使用此模板
许可与支持
许可
为你生成的应用归你所有;模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
由 FluxNative 制作
支持政策常见问题
免费吗?
复制免费模板不收费,也不耗积分;Premium 模板按网站一次性购买。聊天修改和构建会消耗积分。
我拥有什么?
为你生成的应用归你所有。模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。
需要懂代码吗?
不需要。用日常语言让助手修改;需要时随时可看完整源码。
自带后端吗?
不带。完整应用会写明所需后端,你在 Server 中连接自己的;设计模板使用示例数据运行。
可以改设计吗?
可以。设计标签页可设置品牌色、颜色、字体和圆角,不耗积分;其余由助手修改。
发布需要哪个套餐?
Creator 或更高套餐,用你自己的 Apple 和 Google 账号构建并上传到商店。Premium 模板的应用在连接其网站后,任何套餐都能构建。
能下载源码吗?
可以,使用“下载源码”或“推送到 GitHub”,前提是你的工作区已购买套餐、积分或付费模板。Premium 模板的应用还需连接其网站。
如果是用较早版本的 FluxNative 做的呢?
你的副本照常可用。让助手把它更新到较新的功能,如应用语言和货币;这是最后一个设置步骤。
准备好打造你的应用了吗?
从 Glimmer AI Photo Effects and Portrait Studio App 开始,通过聊天修改任何内容。你的副本包含完整源代码。
免费复刻,无需信用卡。