proud-tiktok

byabdou meriem

أنت الآن فريق إنتاج إبداعي عالمي يجمع بين: 1. كاتب سيناريو متخصص في القصص الإنسانية والإيمانية المؤثرة. 2. مخرج أفلام أنيميشن سينمائية ثلاثية الأبعاد. 3. خبير في علم النفس السردي والتأثير العاطفي. 4. مهندس برومبتات متقدم لتوليد الصور والفيديو بالذكاء الاصطناعي. 5. خبير استراتيجيات الانتشار والاحتفاظ بالمشاهدين على TikTok. المشروع: روح وريحان «روح وريحان» حساب TikTok عربي يقدم محتوى إيمانيًا وإنسانيًا ونفسيًا يلامس القلوب، ويخاطب الأشخاص الذين يعانون من الحزن والخذلان والقلق وتأخر الفرج. الهوية البصرية: Premium Cinematic Stylized 3D Animation. الهدف: إنتاج فيديو قصصي استثنائي يجعل المشاهد يتوقف خلال أول ثانيتين، ويتابع حتى النهاية، ثم يشعر برغبة حقيقية في مشاركته أو حفظه. التحدي الأول: الإبداع ابتكر ثلاث أفكار قصصية أصلية تمامًا. الشروط: - قصص إنسانية أو إيمانية ذات معنى عميق. - تجنب القصص المستهلكة والكليشيهات. - لا تعتمد على شخصية تبكي أمام نافذة أو تنتظر رسالة أو تجلس وحيدة في غرفة مظلمة. - كل قصة تحتوي على لغز بصري أو تفصيل غامض منذ البداية. - يجب أن تتضمن النهاية مفاجأة عاطفية تعيد تفسير ما شاهده المتفرج. - لا تعتمد على المصادفات غير المنطقية أو التلاعب العاطفي الرخيص. - يجب أن تكون القصة مفهومة دون صوت. - لا تنسب إلى القرآن أو الحديث أي نص غير موثق. قيّم الأفكار الثلاث من 100 حسب: الأصالة، قوة البداية، التأثير العاطفي، المفاجأة، والوضوح البصري. اختر أقوى فكرة وفسّر سبب اختيارك. التحدي الثاني: كتابة السيناريو حوّل الفكرة الفائزة إلى فيلم قصير مدته 26 ثانية بالضبط. المواصفات: - عمودي 9:16. - بدون صوت أو تعليق صوتي أو موسيقى. - رسوم 3D كرتونية سينمائية شبه واقعية. - شخصيات عربية بتعابير وجه طبيعية ومؤثرة. - حبكة واضحة بصريًا. - مفاجأة في الثواني الأخيرة. - خاتمة عربية قصيرة وقوية. قسّم الفيلم إلى 6 مشاهد. لكل مشهد قدم: 1. التوقيت الدقيق بالثواني. 2. وصف الحدث. 3. زاوية الكاميرا وحركتها. 4. تعبيرات الشخصيات. 5. الإضاءة والألوان. 6. العنصر البصري الذي يدفع المشاهد لمواصلة المتابعة. 7. النص العربي الذي سيظهر على الشاشة، عند الحاجة. يجب أن يكون مجموع أزمنة المشاهد 26 ثانية بالضبط. التحدي الثالث: الإخراج السينمائي اكتب برومبتًا إنجليزيًا احترافيًا مستقلًا لتوليد صورة كل مشهد. يجب أن يتضمن كل برومبت: - تفاصيل الشخصية الثابتة. - الملابس والألوان. - المكان والديكور. - التكوين البصري. - نوع العدسة. - الإضاءة السينمائية. - العمق البصري. - الأسلوب ثلاثي الأبعاد. - نسبة 9:16. - عدم وجود نصوص أو علامات مائية. أنشئ أولًا Character Bible يضمن ثبات ملامح الشخصيات بين المشاهد. اجعل الصور مختلفة بصريًا، وتجنب الديكورات المكررة والتكوينات التقليدية. التحدي الرابع: تحويل الصور إلى فيديو اكتب لكل مشهد برومبت Image-to-Video مستقلًا يحدد: - حركة الشخصيات. - حركة الكاميرا. - التغيرات الدقيقة في تعابير الوجه. - حركة الملابس والعناصر البيئية. - بداية الحركة ونهايتها. - طريقة الانتقال إلى المشهد التالي. يجب تجنب: - تشوه الوجوه. - الأصابع الإضافية. - تغير الملابس. - تغير ملامح الشخصيات. - الحركة المبالغ فيها. - اهتزاز الكاميرا غير المقصود. - ظهور النصوص المشوهة. التحدي الخامس: استراتيجية TikTok قدّم: 1. خمسة عناوين جذابة غير مضللة. 2. أقوى Hook لأول ثانيتين. 3. وصفًا عربيًا مؤثرًا. 4. خمسة هاشتاغات مناسبة. 5. اقتراحًا لصورة الغلاف. 6. تحليلًا لاحتمالات احتفاظ المشاهدين. 7. ثلاثة أسباب محتملة لفشل الفيديو وكيفية معالجتها. التحدي السادس: النقد الذاتي تصرف كناقد سينمائي صارم. حلل العمل النهائي وحدد: - أضعف مشهد. - أكثر لحظة قابلة لفقدان المشاهد. - مدى منطقية المفاجأة. - هل القصة مؤثرة فعلًا أم مجرد عاطفة مصطنعة؟ - هل يمكن فهمها دون صوت؟ - هل توجد أي أخطاء دينية أو ادعاءات غير موثقة؟ ثم حسّن السيناريو مرة أخيرة قبل تقديم النسخة النهائية. شرط التنفيذ لا تكتفِ بالنصائح العامة. أريد حزمة إنتاج متكاملة، جاهزة للاستخدام، مع سيناريو نهائي وبرومبتات دقيقة. إذا كانت لديك أدوات فعلية لتوليد الصور أو الفيديو، استخدمها لإنتاج نموذج أولي. وإذا لم تكن متاحة، فلا تدّعِ أنك أنتجت فيديو. أريد نتيجة بمستوى استوديو أنيميشن سينمائي محترف، لا محتوى TikTok تقليديًا. ابدأ الآن.

الرئيسية
الرئيسية

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for proud-tiktok

1. Introduction

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.

Page 1 of 27

Success Criteria

  • A creator can complete the full pipeline — idea → 26-second script → 6 timed scenes → character bible → English image prompts → Image-to-Video prompts → TikTok pack → saved project → export — inside one studio session.
  • Every AI-dependent output is either produced by a real configured model provider or shown as an explicit "requires external API / not configured" state; no output is ever simulated.
  • Scene timings always sum to exactly 26 seconds across exactly 6 scenes.
  • The interface remains fully readable and operable in Arabic RTL at 375px, 768px, and 1280px, in both light and dark modes.
Page 2 of 27

2. System Overview

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.

Page 3 of 27

Removed from scope

  • Simple informational/marketing-only website (a plain "موقع تعريفي بسيط") as the product's form.

2a. Product Interpretation and Delivery Boundary

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:

  • Directly executable in the application: script editing, automatic 6-scene division and timing arithmetic, character-bible records, prompt assembly and templates, project saving/loading, copy-to-clipboard, export, TikTok pack storage, theme switching, and all navigation and layout.
  • Requires an external AI API: generating original story ideas, generating/refining script prose, generating English image prompts and Image-to-Video prompts from model reasoning, and generating TikTok titles/description/hashtags. These run only through the configured LiteLLM gateway and a real provider; otherwise the studio shows an explicit "not configured / unavailable" state.

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.

2c. Page Content and Component Coverage

Page 4 of 27

الرئيسية

  • Purpose and access: Public entry surface, anonymously reachable. Explains the studio and hosts an interactive preview before identity is established.
  • Information/state: Product identity (Rouh & Rayhan AI Studio), the studio's purpose (Islamic and human-interest TikTok story production), the pipeline overview (idea → 26-second script → 6 timed scenes → character bible → English image prompts → Image-to-Video prompts → TikTok pack → export), and an explicit note distinguishing directly executable functions from external-API-dependent functions.
  • Primary actions: Open the studio (routes to sign-in/registration when unauthenticated); start the interactive preview; navigate to sign-in.
  • Supporting actions: Switch light/dark theme; read the external-API disclosure.
  • Domain entities: none persisted; preview is ephemeral.
  • Component responsibilities: Hero split (Arabic narrative half / English technical half); pipeline overview; interactive preview panel; external-API disclosure block; theme toggle; entry CTA.
  • States: Loading (preview initializing); empty (no preview run yet — shows a clear prompt to start); success (preview renders real, non-fabricated sample structure such as the 6-scene timing layout); error (preview unavailable — explicit message, no fake content); recovery (retry).
Page 5 of 27

تسجيل الدخول

  • Purpose and access: Identity access surface, anonymously reachable. Returning verification and first-use self-service registration for the Story Creator.
  • Information/state: Registration form (first use) and sign-in form (returning); validation and error states.
  • Primary actions: Register a new creator account; sign in with existing credentials.
  • Supporting actions: Switch between register and sign-in; return to الرئيسية.
  • Domain entities: Creator account (identity), session.
  • Component responsibilities: Auth forms, validation, error messaging, redirect to لوحة التحكم on success.
  • States: Loading (submitting); empty (blank forms); success (redirect to dashboard); error (invalid credentials, duplicate registration, validation failure); recovery (correct and resubmit).
Page 6 of 27

لوحة التحكم

  • Purpose and access: Authenticated (login). Professional Arabic RTL dashboard summarizing and routing to the idea generator, projects, and production tools.
  • Information/state: Overview of the creator's projects and pipeline entry points; theme state (light/dark).
  • Primary actions: Navigate to مولّد الأفكار, المشاريع, and production tools; toggle dark/light mode.
  • Supporting actions: Open a recent project; view pipeline shortcuts.
  • Domain entities: Project summaries.
  • Component responsibilities: RTL navigation rail, project summary region, tool entry cards, theme toggle.
  • States: Loading (fetching summaries); empty (no projects yet — prompt to generate a first idea); success (summaries shown); error (fetch failure — explicit message); recovery (retry).
Page 7 of 27

مولّد الأفكار

  • Purpose and access: Authenticated (login). Generates original, moving story ideas and lets the creator select one to carry into the script.
  • Information/state: Generation inputs (theme/angle), generated idea candidates, selection state, external-API status.
  • Primary actions: Request idea generation (via configured provider); select an idea to proceed to محرر السيناريو.
  • Supporting actions: Regenerate; save selected idea to a project.
  • Domain entities: Story idea, project.
  • Component responsibilities: Input form, candidate list, selection control, API-status indicator.
  • States: Loading (generating); empty (no ideas yet); success (candidates shown); error/unavailable (no provider configured or call failed — explicit, no fabricated ideas); recovery (configure provider or retry).

محرر السيناريو

  • Purpose and access: Authenticated (login). Edits a 26-second script and automatically divides it into exactly 6 scenes with timing.
  • Information/state: Script text, 6 scene records with per-scene timing, total-time indicator (must equal 26s), active scene.
  • Primary actions: Edit script; trigger automatic 6-scene division with timing; adjust scene timing; save.
  • Supporting actions: Navigate scenes; proceed to برومبتات الصور.
  • Domain entities: Script, scene (timing, description).
  • Component responsibilities: Script editor, scene list, timing bar, total-time validator.
  • States: Loading (dividing); empty (no script); success (6 scenes, total = 26s); error (division failed or total ≠ 26s — explicit validation); recovery (adjust/retry).
Page 8 of 27

الشخصيات

  • Purpose and access: Authenticated (login). Manages a fixed character definition to keep characters consistent across scenes.
  • Information/state: Character records (identity details, appearance, clothing/colors) bound to the project.
  • Primary actions: Create/edit character definitions; attach characters to scenes.
  • Supporting actions: Review consistency across scenes.
  • Domain entities: Character (bible entry), scene-character link.
  • Component responsibilities: Character bible editor, consistency view.
  • States: Loading; empty (no characters — prompt to add); success (characters defined); error (save failure); recovery (retry).

برومبتات الصور

  • Purpose and access: Authenticated (login). Generates professional English 3D cinematic 9:16 image prompts per scene, with copy-to-clipboard.
  • Information/state: Per-scene English image prompts incorporating character-bible details; API status.
  • Primary actions: Generate image prompts (via provider); copy a prompt to clipboard.
  • Supporting actions: Regenerate per scene; proceed to برومبتات الفيديو.
  • Domain entities: Image prompt (per scene).
  • Component responsibilities: Prompt list, generate controls, copy buttons, API-status indicator.
  • States: Loading (generating); empty (no prompts yet); success (prompts shown, copy confirms); error/unavailable (explicit, no fabricated prompts); recovery (retry/configure).
Page 9 of 27

برومبتات الفيديو

  • Purpose and access: Authenticated (login). Generates Image-to-Video prompts per scene, with copy-to-clipboard.
  • Information/state: Per-scene Image-to-Video prompts; API status.
  • Primary actions: Generate Image-to-Video prompts (via provider); copy a prompt.
  • Supporting actions: Regenerate per scene; proceed to حزمة TikTok.
  • Domain entities: Video prompt (per scene).
  • Component responsibilities: Prompt list, generate controls, copy buttons, API-status indicator.
  • States: Loading; empty; success (copy confirms); error/unavailable (explicit); recovery (retry/configure).

حزمة TikTok

  • Purpose and access: Authenticated (login). Generates TikTok titles, description, and hashtags for the project.
  • Information/state: Generated titles, Arabic description, hashtags; API status.
  • Primary actions: Generate TikTok pack (via provider); copy individual items.
  • Supporting actions: Regenerate; save pack to project.
  • Domain entities: TikTok pack (titles, description, hashtags).
  • Component responsibilities: Pack display, generate controls, copy buttons, API-status indicator.
  • States: Loading; empty; success (copy confirms); error/unavailable (explicit); recovery (retry/configure).
Page 10 of 27

المشاريع

  • Purpose and access: Authenticated (login). Project library that saves stories and prompts, retrieves them, and exports projects.
  • Information/state: List of the creator's projects with their saved stories, scripts, scenes, characters, prompts, and TikTok packs.
  • Primary actions: Open a project; export a project; delete a project.
  • Supporting actions: Search/filter; create new project.
  • Domain entities: Project (aggregate of story, script, scenes, characters, prompts, TikTok pack).
  • Component responsibilities: Project list, open/export/delete controls, export output.
  • States: Loading; empty (no projects — prompt to create); success (list shown); error (load/export failure — explicit); recovery (retry).
Page 11 of 27

3. Functional Requirements

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.

  • Trigger: creator signs in and lands on لوحة التحكم.
  • Observable result: RTL Arabic dashboard with navigation to idea generator, projects, and production tools.
  • Access: login. Failure/recovery: if summaries fail to load, an explicit error with retry. Continuation: navigate to any tool.

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.

  • Trigger: creator requests generation in مولّد الأفكار.
  • Observable result: idea candidates produced by a real configured provider; creator can select one.
  • Access: login. Failure/recovery: if no provider is configured or the call fails, an explicit unavailable/error state with no fabricated ideas; retry or configure. Continuation: selected idea carries into محرر السيناريو.

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.

  • Trigger: creator edits script text in محرر السيناريو.
  • Observable result: saved script text with a total-duration indicator.
  • Access: login. Failure/recovery: save failure shows explicit error with retry. Continuation: proceed to scene division.
Page 12 of 27

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.

  • Trigger: creator triggers automatic division.
  • Observable result: exactly 6 scenes, each with timing, summing to exactly 26 seconds.
  • Access: login. Failure/recovery: if division fails or the total ≠ 26s, an explicit validation error; creator adjusts or retries. Continuation: proceed to image prompts.

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.

  • Trigger: creator requests image-prompt generation in برومبتات الصور.
  • Observable result: per-scene English image prompts from a real provider.
  • Access: login. Failure/recovery: explicit unavailable/error with no fabricated prompts; retry/configure. Continuation: copy prompts or proceed to video prompts.

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.

  • Trigger: creator requests generation in برومبتات الفيديو.
  • Observable result: per-scene Image-to-Video prompts from a real provider.
  • Access: login. Failure/recovery: explicit unavailable/error; retry/configure. Continuation: copy prompts or proceed to TikTok pack.
Page 13 of 27

FR-7 — Character consistency system (explicit) As a Story Creator I should maintain a fixed character definition across scenes, so that characters stay consistent.

  • Trigger: creator defines/edits characters in الشخصيات.
  • Observable result: character records bound to the project and referenced by scene prompts.
  • Access: login. Failure/recovery: save failure shows explicit error with retry. Continuation: prompts incorporate the character bible.

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.

  • Trigger: creator saves work; opens المشاريع.
  • Observable result: projects persisted and listed with their stories, scripts, scenes, characters, prompts, and TikTok packs.
  • Access: login. Failure/recovery: load/save failure shows explicit error with retry. Continuation: open a project to resume.

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.

  • Trigger: creator requests generation in حزمة TikTok.
  • Observable result: titles, Arabic description, and hashtags from a real provider.
  • Access: login. Failure/recovery: explicit unavailable/error; retry/configure. Continuation: copy items or save to project.
Page 14 of 27

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.

  • Trigger: creator clicks a copy button or export.
  • Observable result: prompt copied to clipboard with confirmation; project exported as a package.
  • Access: login. Failure/recovery: clipboard/export failure shows explicit error with retry. Continuation: paste into external tools or save export.

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.

  • Trigger: creator uses the app across viewports and toggles theme.
  • Observable result: RTL Arabic layout, light/dark modes, responsive at phone and desktop.
  • Access: per destination. Failure/recovery: layout remains readable/operable at all viewports. Continuation: continue work.

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.

  • Trigger: creator performs any pipeline action.
  • Observable result: real persistence and real provider-backed generation where configured; no simulated AI output.
  • Access: login. Failure/recovery: unavailable states are explicit. Continuation: complete the pipeline.
Page 15 of 27

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.

  • Trigger: visitor interacts with the preview on الرئيسية.
  • Observable result: an interactive, non-fabricated preview of the studio structure.
  • Access: none (anonymous). Failure/recovery: preview unavailable shows explicit message with retry. Continuation: proceed to sign-in/registration.

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.

  • Trigger: new creator registers on تسجيل الدخول.
  • Observable result: account created; creator signed in and routed to لوحة التحكم.
  • Access: none (anonymous entry). Failure/recovery: validation/duplicate errors shown; correct and resubmit. Continuation: begin pipeline.

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.

  • Trigger: returning creator signs in on تسجيل الدخول.
  • Observable result: authenticated session; access to saved projects and tools.
  • Access: none (anonymous entry). Failure/recovery: invalid credentials show explicit error; retry. Continuation: open a project.
Page 16 of 27

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.

  • Trigger: creator views disclosure and configures provider access.
  • Observable result: clear labeling of external-API vs directly executable functions; generation enabled only when a provider is configured.
  • Access: login (configuration); disclosure visible on الرئيسية. Failure/recovery: missing/invalid keys show explicit unavailable state. Continuation: run generation.

4. User Personas

Page 17 of 27

صانع محتوى قصصي (Story Creator)

  • Product context: A solitary writer-director-producer working late, creating silent, cinematic 26-second vertical TikTok stories of faith and human consolation for an audience experiencing grief, disappointment, anxiety, and delayed relief. They move between Arabic emotional drafting and English technical prompting.
  • Primary goal: Produce a complete, copy-ready production package — original idea, 26-second 6-scene script with timing, character bible, English 3D 9:16 image prompts, Image-to-Video prompts, and a TikTok pack — saved and exportable, without any fabricated AI output.
  • Distinct accepted responsibilities: Generating and selecting original ideas; editing the 26-second script; triggering automatic 6-scene division with timing that sums to 26s; defining characters for consistency; generating English image and Image-to-Video prompts; generating TikTok titles/description/hashtags; copying prompts; saving and exporting projects; managing theme and working across devices.
  • Relevant inputs/decisions: Theme/angle for idea generation; script text; scene timing adjustments; character definitions; provider configuration; which idea to carry forward; when to export.
  • Interactions with other participants: None beyond the creator; the studio's AI providers are external services, not human participants.
  • Observable success: A saved, exported project whose scenes total exactly 26 seconds, whose prompts are real provider output (or explicitly marked unavailable), and whose TikTok pack is ready to publish.
  • Provenance: required_inference (single active human persona per Planning Scope).

5. Core User Flows

Page 18 of 27

Flow A — First visit and preview (anonymous)

  1. Visitor opens الرئيسية (anonymous).
  2. Visitor reads the studio purpose and the external-API disclosure.
  3. Visitor interacts with the interactive preview, which shows the real studio structure (e.g., the 6-scene timing layout) without fabricated AI output.
  4. Visitor selects افتح الاستوديو, routing to تسجيل الدخول.
  5. If the preview is unavailable, an explicit message with retry is shown; the visitor may still proceed to sign-in.
Page 19 of 27

Flow B — Registration and first project (Story Creator)

  1. New creator opens تسجيل الدخول and registers (self-service).
  2. On success, creator is routed to لوحة التحكم (empty state prompts a first idea).
  3. Creator opens مولّد الأفكار, requests generation; a real provider returns candidates (or an explicit unavailable state if unconfigured).
  4. Creator selects an idea, which carries into محرر السيناريو.
  5. Creator edits the 26-second script and triggers automatic division into exactly 6 timed scenes summing to 26s.
  6. Creator proceeds to الشخصيات to define characters for consistency.
  7. Creator proceeds to برومبتات الصور to generate English 3D 9:16 image prompts and copies them.
  8. Creator proceeds to برومبتات الفيديو to generate Image-to-Video prompts and copies them.
  9. Creator proceeds to حزمة TikTok to generate titles, description, and hashtags.
  10. Creator saves the project; it appears in المشاريع.
  11. Failure/recovery: any generation step without a configured provider shows an explicit unavailable state; the creator configures a provider (FR-16) or retries. Continuation: resume from the saved project.

Flow C — Returning creator resumes a project

  1. Returning creator opens تسجيل الدخول and signs in.
  2. Creator lands on لوحة التحكم and opens المشاريع.
  3. Creator opens a saved project and resumes editing or generation at any stage.
  4. Creator exports the project (FR-10) or copies remaining prompts.
  5. Failure/recovery: invalid credentials show an explicit error; load/export failure shows an explicit error with retry.
Page 20 of 27

Flow D — Theme and cross-device use

  1. Creator toggles dark/light mode from لوحة التحكم or الرئيسية.
  2. Creator continues work on phone or desktop; the RTL Arabic layout remains readable and operable at 375px, 768px, and 1280px.

6. Visuals Colors and Theme

The creative direction is authoritative: a dual-nature craft studio — Arabic narrative on one side, English technical prompt on the other.

Page 21 of 27
  • Muse and headline: Adham Dannaway's dual-nature language; headline concept "Craft in two tongues: Arabic story on one side, English prompt on the other."
  • Light mode tokens: background #F4F1EA; surface #FFFFFF; text #14161B; primary #0F3D3A; accent #E2542B; muted #6E6A61.
  • Dark mode tokens: ground #101215; surfaces #191C21; text #F2EEE6; primary #2E8C7F; accent #F0653C.
  • Technical half: inverted #14161B code panels with #E8E3D8 text and #E2542B monospace keys.
  • Typography: headings Alexandria (700–800, tight -0.02em tracking, RTL flush); body IBM Plex Sans Arabic; English technical strings IBM Plex Mono at 500, uppercase micro-labels at 11px with 0.14em tracking. Modular scale 1.333: display 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.
  • Shape language: narrative half 10px soft radii with 1px #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.
  • Layout: RTL-first 12-column grid, 24px gutters, 96px max content width at 1280, 20px page padding at 375; persistent right-side rail; two-pane studio split (narrative 58% right, technical 42% left) collapsing to stacked tabs at 768 and a bottom segmented control at 375; full-width 26-second timeline of six proportional scene blocks (5/4/5/4/4/4) always visible above the editor; project library as a ruled table.
  • Accessibility: body text contrast never below 7:1 on either ground; readable text and controls stay whole at 375/768/1280.
Page 22 of 27

7. Signature Design Concept

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.

Page 23 of 27

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

  • Focal subject: the split seam dividing the warm Arabic narrative half from the dark English prompt panel, with the 9:16 wireframe frame on the dark half.
  • Input → transformation → outcome thesis: on hover/focus, a hairline of #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.
  • Motion vocabulary: 140–180ms 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.
  • Composed first frame: seam at 58%, oversized Arabic wordmark clipped by the seam, three mono fact rows, pine CTA bottom-right, dark panel with wireframe frame and prompt strip.
  • Reduced-motion state: seam and split remain static; the traveling hairline and reveal animations are disabled; all content and controls remain fully readable and operable.
Page 24 of 27

9. Non-Functional Requirements

  • No fabricated AI data (explicit): the studio must never present simulated AI output as real; unavailable generation is shown explicitly.
  • External API disclosure (explicit): the product must clearly distinguish functions requiring an external AI API from those executable directly.
  • No false production claims (explicit): the application must not claim to have produced a video or image it did not produce.
  • Real usable MVP (explicit): functionality must be genuine, not a mockup.
  • Arabic RTL (explicit): the interface is Arabic with full RTL support.
  • Responsive (explicit): compatible with phone and computer; readable and operable at 375px, 768px, and 1280px.
  • Dark mode (explicit): light and dark modes with the specified tokens; body text contrast ≥ 7:1.
  • Identity and privacy (required_inference): projects are privately owned per creator; protected destinations require sign-in.
  • Durability (required_inference): projects, scripts, scenes, characters, prompts, and TikTok packs persist in application-owned storage.
Page 25 of 27

10. Tech Stack

  • Frontend: React application UI (Arabic RTL, dark mode, responsive).
  • Backend: shared FastAPI process for application APIs and domain modules (idea, script, scene division, characters, prompts, TikTok pack, projects, export, auth).
  • Database: MariaDB for application-owned persistent data.
  • AI gateway: LiteLLM gateway for the backend's model-provider calls, backed by its own PostgreSQL store (separate from application-owned storage).
  • Infrastructure: Docker/docker-compose for the provisioned services (backend, database, frontend, litellm, postgres).

11. Assumptions and Constraints

  • Assumption: AI generation is available only when a model provider is configured through the LiteLLM gateway; otherwise the studio shows explicit unavailable states. (required_inference)
  • Assumption: The application produces prompts and packages, not rendered images or video; external image/video tools are used by the creator. (explicit)
  • Constraint: No fabricated AI data; no false production claims. (explicit)
  • Constraint: Arabic RTL interface; responsive; dark mode. (explicit)
  • Constraint: Real usable MVP, not a mockup. (explicit)
  • Assumption: Single active human persona (Story Creator); no additional roles. (required_inference)
Page 26 of 27

12. Glossary

  • Story Creator (صانع محتوى قصصي): the single active human user who produces the story package.
  • 26-second script: the fixed-duration narrative for a vertical TikTok story video.
  • 6 timed scenes: the automatic division of the script into exactly six scenes whose timings sum to 26 seconds.
  • Character Bible: the fixed character definitions ensuring consistency across scenes.
  • Image prompt: the English 3D cinematic 9:16 prompt for generating a scene still.
  • Image-to-Video prompt: the English prompt for animating a scene still into video.
  • TikTok pack: generated titles, Arabic description, and hashtags.
  • LiteLLM gateway: the service brokering the backend's calls to external model providers.
  • External API: a model provider required for AI generation, distinct from directly executable functions.
Page 27 of 27
Live
الرئيسية design preview
الرئيسية: Read studio purpose
الرئيسية: Read API disclosure
الرئيسية: Start interactive preview
الرئيسية: Retry preview after error
الرئيسية: Toggle dark mode
الرئيسية: Open the studio
تسجيل الدخول: 1. Register new account
تسجيل الدخول: 2. Correct validation errors
تسجيل الدخول: 1. Sign in as returning creator
تسجيل الدخول: 2. Retry invalid credentials
لوحة التحكم: 1. Review project summaries
لوحة التحكم: 2. Retry failed summaries
لوحة التحكم: Toggle dark mode
لوحة التحكم: Open idea generator
مولّد الأفكار: 1. Request idea generation
مولّد الأفكار: 2. Retry after unavailable provider
مولّد الأفكار: Select idea to carry forward
محرر السيناريو: Edit 26-second script
محرر السيناريو: 1. Trigger automatic 6-scene division
محرر السيناريو: 2. Adjust scene timing to 26s
محرر السيناريو: Save script
الشخصيات: Create character definitions
الشخصيات: 1. Attach characters to scenes
الشخصيات: 2. Retry character save
برومبتات الصور: 1. Generate image prompts
برومبتات الصور: 2. Retry unavailable generation
برومبتات الصور: 1. Copy image prompt
برومبتات الصور: 2. Retry clipboard failure
برومبتات الفيديو: 1. Generate video prompts
برومبتات الفيديو: 2. Retry unavailable generation
برومبتات الفيديو: Copy video prompt
حزمة TikTok: 1. Generate TikTok pack
حزمة TikTok: 2. Retry unavailable generation
حزمة TikTok: Copy TikTok items
حزمة TikTok: Save pack to project
المشاريع: View saved project
المشاريع: 1. Export project package
المشاريع: 2. Retry failed export
المشاريع: 1. Open project to resume
المشاريع: 2. Retry failed project load
Live
الرئيسية design preview
الرئيسية: Read studio purpose
الرئيسية: Read API disclosure
الرئيسية: Start interactive preview
الرئيسية: Retry preview after error
الرئيسية: Toggle dark mode
الرئيسية: Open the studio
تسجيل الدخول: 1. Register new account
تسجيل الدخول: 2. Correct validation errors
تسجيل الدخول: 1. Sign in as returning creator
تسجيل الدخول: 2. Retry invalid credentials
لوحة التحكم: 1. Review project summaries
لوحة التحكم: 2. Retry failed summaries
لوحة التحكم: Toggle dark mode
لوحة التحكم: Open idea generator
مولّد الأفكار: 1. Request idea generation
مولّد الأفكار: 2. Retry after unavailable provider
مولّد الأفكار: Select idea to carry forward
محرر السيناريو: Edit 26-second script
محرر السيناريو: 1. Trigger automatic 6-scene division
محرر السيناريو: 2. Adjust scene timing to 26s
محرر السيناريو: Save script
الشخصيات: Create character definitions
الشخصيات: 1. Attach characters to scenes
الشخصيات: 2. Retry character save
برومبتات الصور: 1. Generate image prompts
برومبتات الصور: 2. Retry unavailable generation
برومبتات الصور: 1. Copy image prompt
برومبتات الصور: 2. Retry clipboard failure
برومبتات الفيديو: 1. Generate video prompts
برومبتات الفيديو: 2. Retry unavailable generation
برومبتات الفيديو: Copy video prompt
حزمة TikTok: 1. Generate TikTok pack
حزمة TikTok: 2. Retry unavailable generation
حزمة TikTok: Copy TikTok items
حزمة TikTok: Save pack to project
المشاريع: View saved project
المشاريع: 1. Export project package
المشاريع: 2. Retry failed export
المشاريع: 1. Open project to resume
المشاريع: 2. Retry failed project load