The image shows a redesigned interface with: (1) ayahs listed with numbered rows on the left where each ayah is selectable/clickable, and (2) the background selector on the right featuring a "تلقائي/يدوي" toggle, Pixabay/Pexels source buttons, image/video type checkboxes, and a prominent "جلب خلفيات إسلامية تلقائياً" fetch button with thumbnail previews below.

Let me read the current files first.

Good - backend is running. Now let me read all the relevant frontend files:

Now I have a clear picture of everything. Here's what I need to do:

1. BackgroundSelector: Redesign to match the image - تلقائي/يدوي pills at top, then Pixabay/Pexels source buttons, then صور/فيديو checkboxes side by side, then a big "جلب خلفيات إسلامية تلقائياً" button, then thumbnail grid.
2. SurahSelector + AyahPreview: Add an ayah list showing each ayah numbered, with a "text display start" control - the user picks from which ayah number the text starts appearing (to skip Basmala at start).
3. VideoSettings: Add textStartAyah setting to control from which ayah text appears on video.
4. App.tsx: Wire new textStartAyah state.

Let me implement all these changes:

Now update SurahSelector to show an ayah list below the range selectors, and add a "text display start" (displayFromAyah) prop:

Now update types.ts to add display_from_ayah to VideoSettings:

Now update App.tsx to add displayFromAyah state, pass it to SurahSelector and AyahPreview, and include it in videoSettings:

Now update the SurahSelector usage in App.tsx to pass the new props:

Now pass displayFromAyah to AyahPreview as well:

Now update AyahPreview to accept and use displayFromAyah - segments before the display threshold show only audio icon (no text overlay in the mockup):

Now I need to add isTextHidden logic to the preview - when current.type === 'ayah' and current.number < displayFromAyah, show a "صوت فقط" overlay instead of text. Let me read the current render section to locate the right place:

Now add the "audio only" overlay inside the phone mockup content area, replacing the ayah text block when text is hidden:

Also update the controls label to show "(صوت فقط)" indicator when on a hidden-text segment:

Now the loadingAyahs check in App.tsx prevents passing ayahs to SurahSelector while loading. Since SurahSelector now needs ayahs, I need to always pass them (even empty while loading). Let me verify how the SurahSelector is called - it already receives ayahs={ayahs} and the loading state only affects the AyahPreview panel. That's correct already.

Finally, let me also update the VideoSettings info box to mention the new feature:

Here's a summary of all the changes made:

BackgroundSelector - Completely redesigned to match the image: pill-style تلقائي/يدوي toggle at top, then Pixabay/Pexels source buttons, then صور/فيديو checkboxes side by side, then the prominent "جلب خلفيات إسلامية تلقائياً" button that auto-fetches with an Islamic query, followed by thumbnail grid.

SurahSelector - Added a "ظهور النص من الآية" number input that lets the user pick from which ayah text starts appearing on the video (e.g. set to 2 to skip Basmala). Below it, a scrollable ayah list shows all selected ayahs with gold numbered badges - ayahs before the display threshold appear dimmed with a "صوت فقط" tag.

AyahPreview - Added isTextHidden logic: when previewing an ayah before the displayFromAyah threshold, the phone mockup shows a musical note icon with "صوت فقط" instead of the ayah text, accurately representing what the final video will look like.

Good - I now have a complete picture of the entire codebase. The backend is fully implemented with all routes, frame generation, and FFmpeg video building. The frontend UI is all built. The todo list tasks 2-5 are actually complete in the code - they just weren't marked as done. Let me also wire the display_from_ayah parameter into the backend run_video_generation so that "audio-only" segments don't show text frames, then mark all tasks done.

Now update the frame generation loop to pass show_text=False when the ayah number is before display_from_ayah, and update create_frame to accept a show_text flag:

Now update create_frame to accept and use the show_text parameter:

Now add the show_text guard inside create_frame so the text/reciter blocks are skipped when show_text=False:

Now pass display_from_ayah from VideoGenerator frontend payload, and mark all todo tasks as done:

All tasks are now complete. The display_from_ayah parameter is fully wired end-to-end: the frontend sends it in the generation payload, and the backend's run_video_generation now passes a show_text=False flag to create_frame for any ayah before the threshold - those segments get a clean decorative frame (no text) while the audio still plays. The todo list reflects that all five milestones - project setup, backend API, frontend UI, video preview system, and download/export - are fully implemented and connected.

Now let me read the App.tsx and backend to understand the full flow:

Now I have a complete picture. Two fixes needed:

1. SurahSelector - Change the description text from "بدون نص (الصوت فقط)" to "بدون نص وبدون الصوت" and update the behaviour: displayFromAyah now means the video starts from that ayah entirely (skipping earlier ones completely - no audio either).
2. BackgroundSelector - The results grid is not clearing/re-rendering when a new search is done because setResults replaces the array but React may be reusing DOM nodes with the same keys. The fix is to add a resultsKey counter that increments on each fetch, forcing a fresh render of the grid.

Also update the ayah list label for skipped items from "صوت فقط" to "يتم تخطيها":

Now fix the BackgroundSelector - add a resultsKey counter that increments on every fetch to force the grid to fully remount and show fresh results:

Now wire resultsKey to the results grid as a key prop so it fully remounts, and also make the source/mediaType buttons trigger a re-fetch automatically:

Now add key={resultsKey} to the results grid div to force full remount on each fetch:

Now update the backend so that skipped ayahs (before display_from_ayah) are completely excluded from the video — no audio, no frame — rather than just rendering a blank frame. Let me read the relevant section:

Now I can see the segment loop. I need to change the logic: instead of creating a blank frame and including the segment, skip entirely any ayah where ayah_num < display_from_ayah:

Here is a summary of all the changes:

SurahSelector.tsx - Updated the warning message to correctly say "بدون نص وبدون الصوت، يبدأ الفيديو مباشرةً من الآية X" and changed the ayah list badge from "صوت فقط" to "تخطي" (with yellow styling) to accurately reflect that these ayahs are fully skipped.

BackgroundSelector.tsx - Added a resultsKey counter that increments on every fetch call (both at start and after results arrive), applied as key={resultsKey} on the grid to force full DOM remounting. Also made clicking the Pixabay/Pexels source buttons and image/video type checkboxes auto-trigger a new fetch when results already exist, so switching between sources or types immediately refreshes the grid.

backend/main.py - Changed the segment loop to use continue to fully skip any ayah segment with ayah_num < display_from_ayah, meaning skipped ayahs produce zero frames and zero audio in the final video. The frame_counter variable ensures sequential frame filenames even after skips.