Update

app/Http/Controllers/FrontMediaController.php

@@ -8,6 +8,24 @@
 
 class FrontMediaController extends Controller
 {
+    public function init(Request $request)
+    {
+
+        $meme = MemeMedia::where('type', 'video')->where('sub_type', 'overlay')->take(1)->inRandomOrder()->first();
+        $background = BackgroundMedia::where('status', 'completed')->take(1)->inRandomOrder()->first();
+
+        return response()->json([
+            'success' => [
+                'data' => [
+                    'init' => [
+                        'meme' => $meme,
+                        'background' => $background,
+                    ],
+                ],
+            ],
+        ]);
+    }
+
     public function memes(Request $request)
     {
         $memes = MemeMedia::where('type', 'video')->where('sub_type', 'overlay')->take('30')->inRandomOrder()->get();

app/Models/BackgroundMedia.php

@@ -7,6 +7,7 @@
 namespace App\Models;
 
 use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Pgvector\Laravel\Vector;
@@ -46,4 +47,28 @@ class BackgroundMedia extends Model
         'embedding',
         'prompt',
     ];
+
+    protected $hidden = [
+        'id',
+        'created_at',
+        'updated_at',
+        'deleted_at',
+        'list_type',
+        'area',
+        'location_name',
+        'status',
+        'media_uuid',
+        'embedding',
+    ];
+
+    protected $appends = [
+        'ids',
+    ];
+
+    protected function ids(): Attribute
+    {
+        return Attribute::make(
+            get: fn ($value, $attributes) => hashids_encode($attributes['id']),
+        );
+    }
 }

app/Models/MemeMedia.php

@@ -64,10 +64,21 @@ class MemeMedia extends Model
         'created_at',
         'updated_at',
         'deleted_at',
+        'type',
+        'sub_type',
+        'original_id',
+        'description',
         'mov_uuid',
         'webm_uuid',
         'gif_uuid',
         'webp_uuid',
+        // 'mov_url',
+        // 'webm_url',
+        'embedding',
+    ];
+
+    protected $appends = [
+        'ids',
     ];
 
     protected function ids(): Attribute

resources/js/modules/editor/editor.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
 import useLocalSettingsStore from '@/stores/localSettingsStore';
+import useMediaStore from '@/stores/MediaStore';
 import { Volume2Icon, VolumeOffIcon } from 'lucide-react';
 import EditNavSidebar from './partials/edit-nav-sidebar';
 import EditSidebar from './partials/edit-sidebar';
@@ -100,6 +101,8 @@ const useResponsiveDimensions = () => {
 };
 
 const Editor = () => {
+    const { init } = useMediaStore();
+
     const { getSetting } = useLocalSettingsStore();
 
     const [isEditNavSidebarOpen, setIsEditNavSidebarOpen] = useState(false);
@@ -108,6 +111,10 @@ const Editor = () => {
     const { maxWidth, responsiveWidth } = useResponsiveDimensions();
     const isBelowMinWidth = useViewportDetection(320);
 
+    useEffect(() => {
+        init();
+    }, []);
+
     const handleEditNavClick = () => {
         setIsEditNavSidebarOpen(!isEditNavSidebarOpen);
     };

resources/js/modules/editor/partials/edit-sidebar.tsx

@@ -1,8 +1,10 @@
+import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { Spinner } from '@/components/ui/spinner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import useMediaStore from '@/stores/MediaStore';
 import { Edit3 } from 'lucide-react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface EditSidebarProps {
     isOpen: boolean;
@@ -10,25 +12,55 @@ interface EditSidebarProps {
 }
 
 export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
-    const { memes, backgrounds, isFetchingMemes, isFetchingBackgrounds, currentTab, setCurrentTab, fetchMemes, fetchBackgrounds } = useMediaStore();
+    const {
+        memes,
+        backgrounds,
+        isFetchingMemes,
+        isFetchingBackgrounds,
+        selectedMeme,
+        selectedBackground,
+        fetchMemes,
+        fetchBackgrounds,
+        selectMeme,
+        selectBackground,
+        clearSelectedMeme,
+        clearSelectedBackground,
+    } = useMediaStore();
 
-    // Fetch media based on currentTab when it changes and data isn't fetched yet
+    // Track the current active tab
+    const [activeTab, setActiveTab] = useState('backgrounds');
+
+    // Fetch data when sidebar opens for the current active tab
     useEffect(() => {
-        if (currentTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
+        if (isOpen) {
+            if (activeTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
+                fetchMemes();
+            } else if (activeTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
+                fetchBackgrounds();
+            }
+        }
+    }, [isOpen, activeTab, memes.length, backgrounds.length, isFetchingMemes, isFetchingBackgrounds]);
+
+    const handleTabChange = (value: string) => {
+        setActiveTab(value);
+        if (value === 'memes' && memes.length === 0 && !isFetchingMemes) {
             fetchMemes();
-        } else if (currentTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
+        } else if (value === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
             fetchBackgrounds();
         }
-    }, [currentTab]);
+    };
 
-    // Determine display states
+    const handleMemeSelect = (meme) => {
-    const isFetching = currentTab === 'memes' ? isFetchingMemes : isFetchingBackgrounds;
+        selectMeme(meme);
-    const media = currentTab === 'memes' ? memes : backgrounds;
+    };
-    const mediaType = currentTab === 'memes' ? 'memes' : 'backgrounds';
+
+    const handleBackgroundSelect = (background) => {
+        selectBackground(background);
+    };
 
     return (
         <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <SheetContent side="right" className="w-80 overflow-y-auto">
+            <SheetContent side="right" className="w-80 overflow-y-auto px-2">
                 <SheetHeader>
                     <SheetTitle className="flex items-center gap-3">
                         <Edit3 className="h-6 w-6" />
@@ -36,64 +68,88 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
                     </SheetTitle>
                 </SheetHeader>
 
-                <div className="space-y-6">
+                {/* Currently Selected Items */}
-                    {/* Background and Meme Selection */}
+                <div className="pb-6">
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="flex justify-center gap-3">
-                        <div
+                        {/* Selected Background */}
-                            className={`cursor-pointer rounded-lg border-2 p-3 text-center ${
+                        <div className="text-center">
-                                currentTab === 'backgrounds' ? 'border-blue-500' : 'border-gray-300'
+                            {selectedBackground ? (
-                            }`}
+                                <div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
-                            onClick={() => setCurrentTab('backgrounds')}
+                                    <img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
-                        >
+                                </div>
-                            <div className="mb-2 h-16 w-full overflow-hidden rounded bg-blue-600">
+                            ) : (
-                                <img
+                                <div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
-                                    src="/placeholder.svg?height=64&width=120"
+                                    No background
-                                    alt="Gaming background"
+                                </div>
-                                    width={120}
+                            )}
-                                    height={64}
+                            <p className="mb-1 text-xs text-gray-600">Background</p>
-                                    className="h-full w-full object-cover"
-                                />
-                            </div>
-                            <span className="text-sm font-medium">Background</span>
                         </div>
-                        <div
+
-                            className={`cursor-pointer rounded-lg border-2 p-3 text-center ${
+                        {/* Selected Meme */}
-                                currentTab === 'memes' ? 'border-blue-500' : 'border-gray-300'
+                        <div className="text-center">
-                            }`}
+                            {selectedMeme ? (
-                            onClick={() => setCurrentTab('memes')}
+                                <div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
-                        >
+                                    <img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
-                            <div className="mb-2 h-16 w-full overflow-hidden rounded bg-gray-200">
+                                </div>
-                                <img
+                            ) : (
-                                    src="/placeholder.svg?height=64&width=120"
+                                <div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
-                                    alt="Meme character"
+                                    No meme
-                                    width={120}
+                                </div>
-                                    height={64}
+                            )}
-                                    className="h-full w-full object-cover"
+                            <p className="mb-1 text-xs text-gray-600">Meme Overlay</p>
-                                />
-                            </div>
-                            <span className="text-sm font-medium">Meme</span>
                         </div>
                     </div>
-
-                    {/* Media Grid */}
-                    {isFetching && <Spinner className="h-4 w-4"></Spinner>}
-                    {!isFetching && media.length === 0 && <div className="w-full text-center">No {mediaType} available.</div>}
-                    {!isFetching && media.length > 0 && (
-                        <div className="grid grid-cols-2 gap-3">
-                            {media.map((item, index) => (
-                                <div key={index} className="aspect-square overflow-hidden rounded-lg bg-gray-100">
-                                    <img
-                                        src={item.imageUrl}
-                                        alt={currentTab === 'memes' ? 'Meme' : 'Background'}
-                                        width={150}
-                                        height={150}
-                                        className="h-full w-full object-cover"
-                                    />
-                                </div>
-                            ))}
-                        </div>
-                    )}
                 </div>
+
+                <Tabs value={activeTab} className="w-full" onValueChange={handleTabChange}>
+                    <TabsList className="grid w-full grid-cols-2">
+                        <TabsTrigger value="memes">Meme</TabsTrigger>
+
+                        <TabsTrigger value="backgrounds">Background</TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent value="backgrounds" className="">
+                        {isFetchingBackgrounds && <Spinner className="h-4 w-4"></Spinner>}
+                        {!isFetchingBackgrounds && backgrounds.length === 0 && <div className="w-full text-center">No backgrounds available.</div>}
+                        {!isFetchingBackgrounds && backgrounds.length > 0 && (
+                            <div className="grid grid-cols-2 gap-2">
+                                {backgrounds.map((item, index) => (
+                                    <Button
+                                        key={item.ids}
+                                        variant="ghost"
+                                        className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
+                                            selectedBackground?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
+                                        }`}
+                                        onClick={() => handleBackgroundSelect(item)}
+                                    >
+                                        <img src={item.media_url} alt="Background" width={150} height={150} className="h-full w-full object-cover" />
+                                    </Button>
+                                ))}
+                            </div>
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="memes" className="">
+                        {isFetchingMemes && <Spinner className="h-4 w-4"></Spinner>}
+                        {!isFetchingMemes && memes.length === 0 && <div className="w-full text-center">No memes available.</div>}
+                        {!isFetchingMemes && memes.length > 0 && (
+                            <div className="grid grid-cols-2 gap-2 p-2">
+                                {memes.map((item, index) => (
+                                    <Button
+                                        key={item.ids}
+                                        variant="ghost"
+                                        className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
+                                            selectedMeme?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
+                                        }`}
+                                        onClick={() => handleMemeSelect(item)}
+                                    >
+                                        <img src={item.gif_url} alt="Meme" width={150} height={150} className="h-full w-full object-cover" />
+                                    </Button>
+                                ))}
+                            </div>
+                        )}
+                    </TabsContent>
+                </Tabs>
             </SheetContent>
         </Sheet>
     );

resources/js/stores/MediaStore.ts

@@ -15,10 +15,51 @@ const useMediaStore = create(
         isFetchingMemes: false,
         isFetchingBackgrounds: false,
 
+        // Selected items
+        selectedMeme: null,
+        selectedBackground: null,
+
         setCurrentTab: (tab) => {
             set({ currentTab: tab });
         },
 
+        // Selection actions
+        selectMeme: (meme) => {
+            set({ selectedMeme: meme });
+        },
+
+        selectBackground: (background) => {
+            set({ selectedBackground: background });
+        },
+
+        // Clear selections
+        clearSelectedMeme: () => {
+            set({ selectedMeme: null });
+        },
+
+        clearSelectedBackground: () => {
+            set({ selectedBackground: null });
+        },
+
+        init: async () => {
+            try {
+                const response = await axiosInstance.post(route('api.app.init'));
+
+                if (response?.data?.success?.data?.init) {
+                    set({
+                        selectedMeme: response.data.success.data.init.meme,
+                        selectedBackground: response.data.success.data.init.background,
+                    });
+                } else {
+                    throw 'Invalid API response';
+                }
+            } catch (error) {
+                console.error('Error fetching init:', error);
+
+                throw error;
+            }
+        },
+
         // Fetch memes (overlays)
         fetchMemes: async () => {
             set({ isFetchingMemes: true });
@@ -77,6 +118,8 @@ const useMediaStore = create(
                 backgrounds: [],
                 isFetchingMemes: false,
                 isFetchingBackgrounds: false,
+                selectedMeme: null,
+                selectedBackground: null,
             });
         },
     })),

resources/js/ziggy.js

@@ -1,4 +1,4 @@
-const Ziggy = {"url":"https:\/\/memeaigen.com","port":null,"defaults":{},"routes":{"horizon.stats.index":{"uri":"horizon\/api\/stats","methods":["GET","HEAD"]},"horizon.workload.index":{"uri":"horizon\/api\/workload","methods":["GET","HEAD"]},"horizon.masters.index":{"uri":"horizon\/api\/masters","methods":["GET","HEAD"]},"horizon.monitoring.index":{"uri":"horizon\/api\/monitoring","methods":["GET","HEAD"]},"horizon.monitoring.store":{"uri":"horizon\/api\/monitoring","methods":["POST"]},"horizon.monitoring-tag.paginate":{"uri":"horizon\/api\/monitoring\/{tag}","methods":["GET","HEAD"],"parameters":["tag"]},"horizon.monitoring-tag.destroy":{"uri":"horizon\/api\/monitoring\/{tag}","methods":["DELETE"],"wheres":{"tag":".*"},"parameters":["tag"]},"horizon.jobs-metrics.index":{"uri":"horizon\/api\/metrics\/jobs","methods":["GET","HEAD"]},"horizon.jobs-metrics.show":{"uri":"horizon\/api\/metrics\/jobs\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.queues-metrics.index":{"uri":"horizon\/api\/metrics\/queues","methods":["GET","HEAD"]},"horizon.queues-metrics.show":{"uri":"horizon\/api\/metrics\/queues\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.jobs-batches.index":{"uri":"horizon\/api\/batches","methods":["GET","HEAD"]},"horizon.jobs-batches.show":{"uri":"horizon\/api\/batches\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.jobs-batches.retry":{"uri":"horizon\/api\/batches\/retry\/{id}","methods":["POST"],"parameters":["id"]},"horizon.pending-jobs.index":{"uri":"horizon\/api\/jobs\/pending","methods":["GET","HEAD"]},"horizon.completed-jobs.index":{"uri":"horizon\/api\/jobs\/completed","methods":["GET","HEAD"]},"horizon.silenced-jobs.index":{"uri":"horizon\/api\/jobs\/silenced","methods":["GET","HEAD"]},"horizon.failed-jobs.index":{"uri":"horizon\/api\/jobs\/failed","methods":["GET","HEAD"]},"horizon.failed-jobs.show":{"uri":"horizon\/api\/jobs\/failed\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.retry-jobs.show":{"uri":"horizon\/api\/jobs\/retry\/{id}","methods":["POST"],"parameters":["id"]},"horizon.jobs.show":{"uri":"horizon\/api\/jobs\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.index":{"uri":"horizon\/{view?}","methods":["GET","HEAD"],"wheres":{"view":"(.*)"},"parameters":["view"]},"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"api.app.memes":{"uri":"api\/app\/memes","methods":["POST"]},"api.app.background":{"uri":"api\/app\/background","methods":["POST"]},"dashboard":{"uri":"dashboard","methods":["GET","HEAD"]},"admin.dashboard":{"uri":"admin","methods":["GET","HEAD"]},"admin.background-generation":{"uri":"admin\/background-generation","methods":["GET","HEAD"]},"admin.background-generation.generate":{"uri":"admin\/background-generation\/generate","methods":["POST"]},"admin.background-generation.save":{"uri":"admin\/background-generation\/save","methods":["POST"]},"admin.background-generation.delete":{"uri":"admin\/background-generation\/delete\/{id}","methods":["POST"],"parameters":["id"]},"profile.edit":{"uri":"settings\/profile","methods":["GET","HEAD"]},"profile.update":{"uri":"settings\/profile","methods":["PATCH"]},"profile.destroy":{"uri":"settings\/profile","methods":["DELETE"]},"password.edit":{"uri":"settings\/password","methods":["GET","HEAD"]},"password.update":{"uri":"settings\/password","methods":["PUT"]},"appearance":{"uri":"settings\/appearance","methods":["GET","HEAD"]},"register":{"uri":"register","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"password.request":{"uri":"forgot-password","methods":["GET","HEAD"]},"password.email":{"uri":"forgot-password","methods":["POST"]},"password.reset":{"uri":"reset-password\/{token}","methods":["GET","HEAD"],"parameters":["token"]},"password.store":{"uri":"reset-password","methods":["POST"]},"verification.notice":{"uri":"verify-email","methods":["GET","HEAD"]},"verification.verify":{"uri":"verify-email\/{id}\/{hash}","methods":["GET","HEAD"],"parameters":["id","hash"]},"verification.send":{"uri":"email\/verification-notification","methods":["POST"]},"password.confirm":{"uri":"confirm-password","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"home":{"uri":"\/","methods":["GET","HEAD"]},"test":{"uri":"tests","methods":["GET","HEAD"]},"storage.local":{"uri":"storage\/{path}","methods":["GET","HEAD"],"wheres":{"path":".*"},"parameters":["path"]}}};
+const Ziggy = {"url":"https:\/\/memeaigen.test","port":null,"defaults":{},"routes":{"horizon.stats.index":{"uri":"horizon\/api\/stats","methods":["GET","HEAD"]},"horizon.workload.index":{"uri":"horizon\/api\/workload","methods":["GET","HEAD"]},"horizon.masters.index":{"uri":"horizon\/api\/masters","methods":["GET","HEAD"]},"horizon.monitoring.index":{"uri":"horizon\/api\/monitoring","methods":["GET","HEAD"]},"horizon.monitoring.store":{"uri":"horizon\/api\/monitoring","methods":["POST"]},"horizon.monitoring-tag.paginate":{"uri":"horizon\/api\/monitoring\/{tag}","methods":["GET","HEAD"],"parameters":["tag"]},"horizon.monitoring-tag.destroy":{"uri":"horizon\/api\/monitoring\/{tag}","methods":["DELETE"],"wheres":{"tag":".*"},"parameters":["tag"]},"horizon.jobs-metrics.index":{"uri":"horizon\/api\/metrics\/jobs","methods":["GET","HEAD"]},"horizon.jobs-metrics.show":{"uri":"horizon\/api\/metrics\/jobs\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.queues-metrics.index":{"uri":"horizon\/api\/metrics\/queues","methods":["GET","HEAD"]},"horizon.queues-metrics.show":{"uri":"horizon\/api\/metrics\/queues\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.jobs-batches.index":{"uri":"horizon\/api\/batches","methods":["GET","HEAD"]},"horizon.jobs-batches.show":{"uri":"horizon\/api\/batches\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.jobs-batches.retry":{"uri":"horizon\/api\/batches\/retry\/{id}","methods":["POST"],"parameters":["id"]},"horizon.pending-jobs.index":{"uri":"horizon\/api\/jobs\/pending","methods":["GET","HEAD"]},"horizon.completed-jobs.index":{"uri":"horizon\/api\/jobs\/completed","methods":["GET","HEAD"]},"horizon.silenced-jobs.index":{"uri":"horizon\/api\/jobs\/silenced","methods":["GET","HEAD"]},"horizon.failed-jobs.index":{"uri":"horizon\/api\/jobs\/failed","methods":["GET","HEAD"]},"horizon.failed-jobs.show":{"uri":"horizon\/api\/jobs\/failed\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.retry-jobs.show":{"uri":"horizon\/api\/jobs\/retry\/{id}","methods":["POST"],"parameters":["id"]},"horizon.jobs.show":{"uri":"horizon\/api\/jobs\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"horizon.index":{"uri":"horizon\/{view?}","methods":["GET","HEAD"],"wheres":{"view":"(.*)"},"parameters":["view"]},"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"api.app.init":{"uri":"api\/app\/init","methods":["POST"]},"api.app.memes":{"uri":"api\/app\/memes","methods":["POST"]},"api.app.background":{"uri":"api\/app\/background","methods":["POST"]},"dashboard":{"uri":"dashboard","methods":["GET","HEAD"]},"admin.dashboard":{"uri":"admin","methods":["GET","HEAD"]},"admin.background-generation":{"uri":"admin\/background-generation","methods":["GET","HEAD"]},"admin.background-generation.generate":{"uri":"admin\/background-generation\/generate","methods":["POST"]},"admin.background-generation.save":{"uri":"admin\/background-generation\/save","methods":["POST"]},"admin.background-generation.delete":{"uri":"admin\/background-generation\/delete\/{id}","methods":["POST"],"parameters":["id"]},"profile.edit":{"uri":"settings\/profile","methods":["GET","HEAD"]},"profile.update":{"uri":"settings\/profile","methods":["PATCH"]},"profile.destroy":{"uri":"settings\/profile","methods":["DELETE"]},"password.edit":{"uri":"settings\/password","methods":["GET","HEAD"]},"password.update":{"uri":"settings\/password","methods":["PUT"]},"appearance":{"uri":"settings\/appearance","methods":["GET","HEAD"]},"register":{"uri":"register","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"password.request":{"uri":"forgot-password","methods":["GET","HEAD"]},"password.email":{"uri":"forgot-password","methods":["POST"]},"password.reset":{"uri":"reset-password\/{token}","methods":["GET","HEAD"],"parameters":["token"]},"password.store":{"uri":"reset-password","methods":["POST"]},"verification.notice":{"uri":"verify-email","methods":["GET","HEAD"]},"verification.verify":{"uri":"verify-email\/{id}\/{hash}","methods":["GET","HEAD"],"parameters":["id","hash"]},"verification.send":{"uri":"email\/verification-notification","methods":["POST"]},"password.confirm":{"uri":"confirm-password","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"home":{"uri":"\/","methods":["GET","HEAD"]},"test":{"uri":"tests","methods":["GET","HEAD"]},"storage.local":{"uri":"storage\/{path}","methods":["GET","HEAD"],"wheres":{"path":".*"},"parameters":["path"]}}};
 if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
   Object.assign(Ziggy.routes, window.Ziggy.routes);
 }

routes/api.php

@@ -23,6 +23,8 @@
 
 Route::group(['prefix' => 'app'], function () {
 
+    Route::post('init', [FrontMediaController::class, 'init'])->name('api.app.init');
+
     Route::post('memes', [FrontMediaController::class, 'memes'])->name('api.app.memes');
 
     Route::post('background', [FrontMediaController::class, 'background'])->name('api.app.background');