Rouh & Rayhan AI Studio (روح وريحان) is a professional Arabic-first, RTL-native Premium SaaS web application for managing the production of Islamic and human-interest TikTok story videos. It is not a simple marketing or portfolio site: it is a working production studio where a single creator moves from a raw story idea to a complete, copy-ready production package — an original story idea, a 26-second script split into exactly 6 timed scenes, a character bible that keeps characters consistent across scenes, professional English 3D cinematic 9:16 image prompts, Image-to-Video prompts, and a TikTok metadata pack of titles, description, and hashtags — all saved in a project library and exportable.
The product serves the creative workflow established in the source brief: a writer-director-producer working in Arabic on the emotional narrative half and in English on the technical prompt half, producing silent, cinematic, vertical 9:16 stories of faith and human consolation for an audience experiencing grief, disappointment, anxiety, and delayed relief. The interface is Arabic with full RTL support, offers a dark mode, and is responsive across phone and desktop.
The MVP must be genuinely usable, not a mockup. It must never present fabricated data as if AI generation had occurred, and it must clearly distinguish what requires an external AI API from what the application performs directly.
Rouh & Rayhan AI Studio is delivered as a web application composed of a React frontend, a shared FastAPI backend, a MariaDB database for application-owned persistent data, and a LiteLLM gateway that brokers the backend's calls to external model providers (with its own PostgreSQL store). The backend owns all domain logic, persistence, and provider orchestration; the frontend owns the Arabic RTL studio experience.
The single active human actor is the Story Creator (صانع محتوى قصصي). The application owns identity: a creator registers on first use and signs in on return to reach their saved projects and production tools. The public entry page explains the studio and offers an interactive preview before identity is established; all production destinations require sign-in.
Current accepted behavior spans: an Arabic RTL dashboard; an original story-idea generator; a 26-second script editor; automatic division of the script into 6 timed scenes; an English 3D cinematic 9:16 image-prompt generator; an Image-to-Video prompt generator; a character-consistency system; a project library that saves stories and prompts; TikTok title/description/hashtag generation; copy buttons and project export; a Premium SaaS Arabic interface with dark mode and responsive layout; a real usable MVP; an interactive preview; and honest disclosure of external API dependencies versus directly executable functions.
AI generation is real only when a model provider is configured through the LiteLLM gateway. When no provider is configured or a call fails, the studio surfaces an explicit unavailable/error state and never substitutes fabricated content. The application does not itself render images or video; it produces prompts and production packages, and it never claims to have produced a video or image it did not produce.
Removed from scope
The studio is a first-party application with application-owned identity and durable, creator-specific project state. A creator establishes identity once (self-service registration) and verifies it on return (sign-in) to reach their saved projects and production tools. The public entry page is anonymously reachable and hosts the interactive preview; it does not expose protected project state.
Two categories of work are deliberately separated and labeled throughout the product:
The application does not generate images or video files. It produces the prompts and packages a creator takes to external image/video tools. No output is ever presented as AI-generated unless a real provider produced it.
FR-1 — Professional Arabic RTL dashboard (explicit) As a Story Creator I should have a professional Arabic dashboard with RTL support, so that I can orient myself and reach the studio's tools.
FR-2 — Original story-idea generator (explicit) As a Story Creator I should generate original, moving story ideas, so that I can start from a strong concept.
FR-3 — 26-second script editor (explicit) As a Story Creator I should edit a script for a 26-second video, so that the narrative fits the exact duration.
FR-4 — Automatic division into 6 timed scenes (explicit) As a Story Creator I should have the script automatically divided into 6 scenes with timing, so that the 26 seconds are structured.
FR-5 — English 3D cinematic 9:16 image-prompt generator (explicit) As a Story Creator I should generate professional English prompts for 3D cinematic 9:16 images, so that I can produce scene stills externally.
FR-6 — Image-to-Video prompt generator (explicit) As a Story Creator I should generate Image-to-Video prompts, so that I can animate scene stills externally.
FR-7 — Character consistency system (explicit) As a Story Creator I should maintain a fixed character definition across scenes, so that characters stay consistent.
FR-8 — Project library (explicit) As a Story Creator I should save stories and prompts in a project library, so that I can retrieve them later.
FR-9 — TikTok titles, description, and hashtags generation (explicit) As a Story Creator I should generate TikTok titles, description, and hashtags, so that I can publish the story.
FR-10 — Copy buttons and project export (explicit) As a Story Creator I should copy prompts and export projects, so that I can move the package into external tools.
FR-11 — Premium SaaS Arabic interface with dark mode and responsive layout (explicit) As a Story Creator I should use an elegant Premium SaaS Arabic interface with dark mode that works on phone and computer, so that the studio feels professional everywhere.
FR-12 — Real usable MVP, not a mockup (explicit) As a Story Creator I should use a genuinely functional MVP, so that the studio actually produces work.
FR-13 — Interactive preview (explicit) As a Story Creator I should see an interactive preview of the app, so that I can understand it before committing.
FR-14 — Self-service registration (required_inference) As a Story Creator I should register to begin using the studio, so that my projects are privately owned.
FR-15 — Returning sign-in (required_inference) As a Story Creator I should sign in on return to reach my saved projects, so that I can resume work.
FR-16 — External API disclosure and configuration (required_inference) As a Story Creator I should see which functions need an external AI API and which run directly, and provide API keys where required, so that I understand and enable real generation.
The creative direction is authoritative: a dual-nature craft studio — Arabic narrative on one side, English technical prompt on the other.
#F4F1EA; surface #FFFFFF; text #14161B; primary #0F3D3A; accent #E2542B; muted #6E6A61.#101215; surfaces #191C21; text #F2EEE6; primary #2E8C7F; accent #F0653C.#14161B code panels with #E8E3D8 text and #E2542B monospace keys.clamp(44px, 7vw, 96px); h1 36/28; h2 26/22; h3 19/17; body 16/15 with 1.85 line-height; scene timecode 13 mono tabular.#E4DFD4 hairlines; technical half 4px sharp radii on #14161B panels with 1px #2A2E35 inner keyline; buttons 8px, never pills; scene cards split by a vertical hairline (Arabic right, English left); no blobs, glass, or deep shadow stacks.The public entry (الرئيسية) is a full-viewport split, not a centered SaaS hero. A 2px vermilion #E2542B seam sits at 58% from the right. The right half is warm paper #F4F1EA with the oversized Arabic wordmark "روح وريحان" in Alexandria 800, clipped by the seam, with a vermilion underline beneath "وريحان"; beneath it three ruled mono rows of real product facts (26 ثانية · 6 مشاهد · 9:16) and a pine-filled CTA "افتح الاستوديو" pinned bottom-right. The left half is a #14161B panel holding a 9:16 wireframe frame in 1px #E8E3D8 lines, a live-looking English prompt strip in IBM Plex Mono, and a small vermilion render dot. The seam is the only saturated element. The split motif recurs at component scale: every scene card is a literal split (Arabic description right, English prompt left), and the character bible renders each persona as a three-panel line-drawing → shaded → lit-render strip. This recomposes only accepted content and controls.
Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d
Landing Hero Motion Brief
#E2542B travels from the split seam outward across the hovered half, revealing the dual-nature craft; the wireframe frame on the dark half resolves toward a lit cinematic still on the warm half — using only accepted content, no new behavior.cubic-bezier(.2,.7,.2,1) panel switches; copy-button confirm with a 120ms ink-to-pine fill and a mono "COPIED ✓" tick for 1.2s; timeline playhead scrubs with no easing lag; scene blocks reveal once with a 200ms opacity-and-2px-rise on mount only; nothing bounces or floats.
استوديو إنتاج قصص TikTok الإيمانية والإنسانيةsilent · cinematic · vertical
character: consistent arabic faces, style: cinematic stylized 3d, lens: 35mm, shallow depth, light: warm dusk rim, negative: no text, no watermark
Production Pipeline / Eight Steps
ثماني كتل مترابطة على مسار واحد، يقرأ من اليمين إلى اليسار: تبدأ بقصة خام وتنتهي بملفات قابلة للتصدير — النصف العربي يحمل الحكاية، والنصف الإنجليزي يحمل تعليمات الآلة.
Story Idea
26-sec Script
6 Timed Scenes
Character Bible
English Image Prompts
Image-to-Video Prompts
TikTok Pack
Export
كل خطوة تحفظ مخرجاتها في مكتبة المشاريع، ويمكن تصديرها من الخطوة الأخيرة.
08 / 08الشرائح الزمنية هنا مشتقة من مدة الفيديو نفسها، لا من تقدير تقريبي. اختر مشهدًا لترى كيف تتقابل الفكرة العربية مع البرومبت الإنجليزي في الوجهين المتقابلين للبطاقة.
معاينة بنيوية فقط: الشريط الزمني، أزمنة كل مشهد (5 / 4 / 5 / 4 / 4 / 4)، وبطاقة المشهد المنقسمة بين الوصف العربي والبرومبت الإنجليزي. لا تُعرض أي مخرجات مولّدة كأنها حقيقية.
الاستوديو يفصل بوضوح بين العمل الذي ينفّذه التطبيق مباشرة، والعمل الذي يتطلب مزوّد ذكاء اصطناعي مُعدًّا خارجيًا.
DIRECT RUNS HEREمباشر داخل التطبيق
NEEDS EXTERNAL APIيتطلب مزوّد ذكاء اصطناعي
لا يُعرض أي ناتج على أنه مولد بالذكاء الاصطناعي إلا إذا أنتجه مزوّد حقيقي فعليًا؛ وإلا يظهر الحقل بحالة صريحة: يتطلب API خارجيًا.
no output is labelled AI-generated unless a real provider produced itافتح الاستوديو للتدرّب على المسار كاملًا: فكرة، سيناريو 26 ثانية، ستة مشاهد موقّتة، برومبتات إنجليزية، وحزمة TikTok. كل ما يحتاج إلى API خارجي يظهر بوضوح قبل تشغيله.

استوديو إنتاج قصص TikTok الإيمانية والإنسانيةsilent · cinematic · vertical
character: consistent arabic faces, style: cinematic stylized 3d, lens: 35mm, shallow depth, light: warm dusk rim, negative: no text, no watermark
Production Pipeline / Eight Steps
ثماني كتل مترابطة على مسار واحد، يقرأ من اليمين إلى اليسار: تبدأ بقصة خام وتنتهي بملفات قابلة للتصدير — النصف العربي يحمل الحكاية، والنصف الإنجليزي يحمل تعليمات الآلة.
Story Idea
26-sec Script
6 Timed Scenes
Character Bible
English Image Prompts
Image-to-Video Prompts
TikTok Pack
Export
كل خطوة تحفظ مخرجاتها في مكتبة المشاريع، ويمكن تصديرها من الخطوة الأخيرة.
08 / 08الشرائح الزمنية هنا مشتقة من مدة الفيديو نفسها، لا من تقدير تقريبي. اختر مشهدًا لترى كيف تتقابل الفكرة العربية مع البرومبت الإنجليزي في الوجهين المتقابلين للبطاقة.
معاينة بنيوية فقط: الشريط الزمني، أزمنة كل مشهد (5 / 4 / 5 / 4 / 4 / 4)، وبطاقة المشهد المنقسمة بين الوصف العربي والبرومبت الإنجليزي. لا تُعرض أي مخرجات مولّدة كأنها حقيقية.
الاستوديو يفصل بوضوح بين العمل الذي ينفّذه التطبيق مباشرة، والعمل الذي يتطلب مزوّد ذكاء اصطناعي مُعدًّا خارجيًا.
DIRECT RUNS HEREمباشر داخل التطبيق
NEEDS EXTERNAL APIيتطلب مزوّد ذكاء اصطناعي
لا يُعرض أي ناتج على أنه مولد بالذكاء الاصطناعي إلا إذا أنتجه مزوّد حقيقي فعليًا؛ وإلا يظهر الحقل بحالة صريحة: يتطلب API خارجيًا.
no output is labelled AI-generated unless a real provider produced itافتح الاستوديو للتدرّب على المسار كاملًا: فكرة، سيناريو 26 ثانية، ستة مشاهد موقّتة، برومبتات إنجليزية، وحزمة TikTok. كل ما يحتاج إلى API خارجي يظهر بوضوح قبل تشغيله.
No comments yet. Be the first!