Spaces:

aibyml
/

AIWhatsAppAssistant

Running

App Files Files Community

Victor HUNG commited on Sep 17, 2025

Commit

0baea03

1 Parent(s): a55dd64

Initial Next.js static site

Browse files

Files changed (12) hide show

404.html +1 -1
404/index.html +1 -1
_next/static/87wwcH_FgNgRe3p1eolDJ/_buildManifest.js +1 -0
_next/static/87wwcH_FgNgRe3p1eolDJ/_ssgManifest.js +1 -0
_next/static/chunks/app/_not-found/page-fedf3beb8839c1ad.js +1 -0
_next/static/chunks/app/layout-33826e0c3c1e90d6.js +1 -0
_next/static/chunks/app/page-a6a9e74bd013ba35.js +1 -0
_next/static/chunks/framework-acd67e14855de5a2.js +0 -0
_next/static/chunks/main-app-cfcf024af855cc4e.js +1 -0
_next/static/css/918e57c118762552.css +3 -0
index.html +25 -1
index.txt +17 -14

404.html CHANGED Viewed

@@ -1 +1 @@

- <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/4cf2300e9c8272f7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/~~0c1ba77f6b982465~~.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-b66e35ffe30362a3.js"/><script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script><script src="/_next/static/chunks/255-fe5c522e6d28d73f.js" async=""></script><script src="/_next/static/chunks/main-app-~~cd42dd9a212595d7~~.js" async=""></script><meta name="robots" content="noindex"/><meta name="next-size-adjust" content=""/><title>404: This page could not be found.</title><title>Create Next App</title><meta name="description" content="Generated by create next app"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_188709 __variable_9a8899 antialiased"><div hidden=""></div><div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div><script src="/_next/static/chunks/webpack-b66e35ffe30362a3.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[8924,[],\"\"]\n4:I[4431,[],\"OutletBoundary\"]\n6:I[5278,[],\"AsyncMetadataOutlet\"]\n8:I[4431,[],\"ViewportBoundary\"]\na:I[4431,[],\"MetadataBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[7150,[],\"\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/~~0c1ba77f6b982465~~.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"~~lDSm9QMRjx_OfENYQSQG1~~\",\"p\":\"\",\"c\":[\"\",\"_not-found\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/~~0c1ba77f6b982465~~.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"/_not-found\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],null,[\"$\",\"$L4\",null,{\"children\":[\"$L5\",[\"$\",\"$L6\",null,{\"promise\":\"$@7\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],[[\"$\",\"$L8\",null,{\"children\":\"$L9\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$b\",null,{\"fallback\":null,\"children\":\"$Lc\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$d\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n5:null\n"])</script><script>self.__next_f.push([1,"e:I[622,[],\"IconMark\"]\n7:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$Le\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"c:\"$7:metadata\"\n"])</script></body></html>

+ <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/4cf2300e9c8272f7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/918e57c118762552.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-b66e35ffe30362a3.js"/><script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script><script src="/_next/static/chunks/255-fe5c522e6d28d73f.js" async=""></script><script src="/_next/static/chunks/main-app-cfcf024af855cc4e.js" async=""></script><meta name="robots" content="noindex"/><meta name="next-size-adjust" content=""/><title>404: This page could not be found.</title><title>Create Next App</title><meta name="description" content="Generated by create next app"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_188709 __variable_9a8899 antialiased"><div hidden=""></div><div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div><script src="/_next/static/chunks/webpack-b66e35ffe30362a3.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[8924,[],\"\"]\n4:I[4431,[],\"OutletBoundary\"]\n6:I[5278,[],\"AsyncMetadataOutlet\"]\n8:I[4431,[],\"ViewportBoundary\"]\na:I[4431,[],\"MetadataBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[7150,[],\"\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/918e57c118762552.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"87wwcH_FgNgRe3p1eolDJ\",\"p\":\"\",\"c\":[\"\",\"_not-found\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/918e57c118762552.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"/_not-found\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],null,[\"$\",\"$L4\",null,{\"children\":[\"$L5\",[\"$\",\"$L6\",null,{\"promise\":\"$@7\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],[[\"$\",\"$L8\",null,{\"children\":\"$L9\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$b\",null,{\"fallback\":null,\"children\":\"$Lc\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$d\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n5:null\n"])</script><script>self.__next_f.push([1,"e:I[622,[],\"IconMark\"]\n7:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$Le\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"c:\"$7:metadata\"\n"])</script></body></html>

404/index.html CHANGED Viewed

@@ -1 +1 @@

_next/static/87wwcH_FgNgRe3p1eolDJ/_buildManifest.js ADDED Viewed

	@@ -0,0 +1 @@

+ self.__BUILD_MANIFEST=function(e,r,t){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},__routerFilterStatic:{numItems:3,errorRate:1e-4,numBits:58,numHashes:14,bitArray:[1,1,0,e,0,e,e,r,e,e,r,e,e,e,r,e,r,r,e,r,r,r,e,r,r,r,r,r,e,r,e,e,e,e,r,e,e,r,e,e,e,r,e,r,e,r,r,e,e,e,r,r,e,e,e,r,e,e]},__routerFilterDynamic:{numItems:r,errorRate:1e-4,numBits:r,numHashes:null,bitArray:[]},"/_error":["static/chunks/pages/_error-cb2a52f75f2162e2.js"],sortedPages:["/_app","/_error"]}}(1,0,1e-4),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

_next/static/87wwcH_FgNgRe3p1eolDJ/_ssgManifest.js ADDED Viewed

	@@ -0,0 +1 @@


1	+ self.__SSG_MANIFEST=new Set([]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()

_next/static/chunks/app/_not-found/page-fedf3beb8839c1ad.js ADDED Viewed

	@@ -0,0 +1 @@

+ (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[492],{3656:(e,t,l)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/_not-found/page",function(){return l(9520)}])},4585:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"styles",{enumerable:!0,get:function(){return l}});let l={error:{fontFamily:'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block"},h1:{display:"inline-block",margin:"0 20px 0 0",padding:"0 23px 0 0",fontSize:24,fontWeight:500,verticalAlign:"top",lineHeight:"49px"},h2:{fontSize:14,fontWeight:400,lineHeight:"49px",margin:0}};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8886:(e,t,l)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"HTTPAccessErrorFallback",{enumerable:!0,get:function(){return o}});let r=l(5155),n=l(4585);function o(e){let{status:t,message:l}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("title",{children:t+": "+l}),(0,r.jsx)("div",{style:n.styles.error,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}),(0,r.jsx)("h1",{className:"next-error-h1",style:n.styles.h1,children:t}),(0,r.jsx)("div",{style:n.styles.desc,children:(0,r.jsx)("h2",{style:n.styles.h2,children:l})})]})})]})}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9520:(e,t,l)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return o}});let r=l(5155),n=l(8886),o=function(){return(0,r.jsx)("html",{children:(0,r.jsx)("body",{children:(0,r.jsx)(n.HTTPAccessErrorFallback,{status:404,message:"This page could not be found."})})})};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)}},e=>{e.O(0,[441,255,358],()=>e(e.s=3656)),_N_E=e.O()}]);

_next/static/chunks/app/layout-33826e0c3c1e90d6.js ADDED Viewed

	@@ -0,0 +1 @@

+ (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[177],{3673:()=>{},3944:e=>{e.exports={style:{fontFamily:"'Geist Mono', 'Geist Mono Fallback'",fontStyle:"normal"},className:"__className_9a8899",variable:"__variable_9a8899"}},6168:e=>{e.exports={style:{fontFamily:"'Geist', 'Geist Fallback'",fontStyle:"normal"},className:"__className_188709",variable:"__variable_188709"}},7997:(e,a,s)=>{Promise.resolve().then(s.t.bind(s,6168,23)),Promise.resolve().then(s.t.bind(s,3944,23)),Promise.resolve().then(s.t.bind(s,3673,23))}},e=>{e.O(0,[652,441,255,358],()=>e(e.s=7997)),_N_E=e.O()}]);

_next/static/chunks/app/page-a6a9e74bd013ba35.js ADDED Viewed

	@@ -0,0 +1 @@

+ (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[974],{3184:(e,s,t)=>{Promise.resolve().then(t.bind(t,9454))},9454:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>w});var n=t(5155),a=t(2115),l=function(e){return e.Disconnected="Disconnected",e.Connecting="Connecting",e.Connected="Connected",e.Error="Error",e}({});let r=e=>{let{name:s,message:t,time:a,active:l}=e;return(0,n.jsxs)("div",{className:"flex items-center gap-3 p-3 cursor-pointer border-l-4 ".concat(l?"bg-slate-600 border-emerald-500":"border-transparent hover:bg-slate-600/50"),children:[(0,n.jsx)("img",{className:"w-12 h-12 rounded-full",src:"https://i.pravatar.cc/150?u=".concat(s),alt:"avatar"}),(0,n.jsxs)("div",{className:"flex-grow overflow-hidden",children:[(0,n.jsxs)("div",{className:"flex justify-between items-center",children:[(0,n.jsx)("p",{className:"font-semibold text-slate-100 truncate",children:s}),(0,n.jsx)("p",{className:"text-xs text-slate-400",children:a})]}),(0,n.jsx)("p",{className:"text-sm text-slate-400 truncate",children:t})]})]})},o=e=>{let{children:s,sent:t,time:a}=e;return(0,n.jsx)("div",{className:"flex items-end gap-2 ".concat(t?"justify-end":"justify-start"),children:(0,n.jsxs)("div",{className:"max-w-[70%] p-3 rounded-xl ".concat(t?"bg-emerald-900 rounded-br-md":"bg-slate-700 rounded-bl-md"),children:[s,(0,n.jsx)("p",{className:"text-xs mt-1 text-right ".concat(t?"text-emerald-300/60":"text-slate-400"),children:a})]})})},i=()=>(0,n.jsxs)("div",{className:"h-full min-h-[400px] lg:min-h-[600px] flex flex-col bg-slate-800 rounded-lg border border-slate-700 shadow-2xl",children:[(0,n.jsxs)("div",{className:"flex items-center p-3 bg-slate-700/50 rounded-t-lg border-b border-slate-600",children:[(0,n.jsxs)("div",{className:"flex space-x-2",children:[(0,n.jsx)("div",{className:"w-3 h-3 rounded-full bg-red-500"}),(0,n.jsx)("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),(0,n.jsx)("div",{className:"w-3 h-3 rounded-full bg-green-500"})]}),(0,n.jsx)("p",{className:"flex-grow text-center text-sm text-slate-400 font-medium",children:"Live Feed: WhatsApp Desktop"})]}),(0,n.jsxs)("div",{className:"flex-grow flex rounded-b-lg overflow-hidden",children:[(0,n.jsxs)("div",{className:"w-[35%] bg-[#111b21] border-r border-slate-600 flex flex-col",children:[(0,n.jsxs)("header",{className:"p-3 bg-[#202c33] flex justify-between items-center",children:[(0,n.jsx)("img",{className:"w-10 h-10 rounded-full",src:"https://i.pravatar.cc/150?u=user",alt:"user avatar"}),(0,n.jsxs)("div",{className:"flex items-center gap-4 text-slate-400",children:[(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M15 21a6 6 0 00-9-5.197M15 21a6 6 0 006-5.197M12 12a4 4 0 110-8 4 4 0 010 8z"})}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})})]})]}),(0,n.jsxs)("div",{className:"flex-grow overflow-y-auto",children:[(0,n.jsx)(r,{name:"Design Team",message:"Here is the final brief for the project.",time:"11:42",active:!0}),(0,n.jsx)(r,{name:"Alex",message:"Sounds good, I'll call you later!",time:"11:30"}),(0,n.jsx)(r,{name:"Mom",message:"Can you pick up milk on your way home?",time:"10:55"}),(0,n.jsx)(r,{name:"Project Group",message:"Let's meet tomorrow at 10am.",time:"Yesterday"})]})]}),(0,n.jsxs)("div",{className:"w-[65%] bg-[#0b141a] flex flex-col",style:{backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAD9JREFUaEPt0AEBAAAAwqD1T20ND6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBgxUwAAU+a6QcAAAAASUVORK5CYII=')",backgroundBlendMode:"overlay",backgroundSize:"400px",backgroundColor:"rgba(11, 20, 26, 0.95)"},children:[(0,n.jsxs)("header",{className:"p-3 bg-[#202c33] flex justify-between items-center border-b border-slate-600/50",children:[(0,n.jsxs)("div",{className:"flex items-center gap-4",children:[(0,n.jsx)("img",{className:"w-10 h-10 rounded-full",src:"https://i.pravatar.cc/150?u=Design Team",alt:"group avatar"}),(0,n.jsxs)("div",{children:[(0,n.jsx)("p",{className:"font-semibold text-slate-100",children:"Design Team"}),(0,n.jsx)("p",{className:"text-xs text-slate-400",children:"Alice, Bob, Charlie"})]})]}),(0,n.jsxs)("div",{className:"flex items-center gap-4 text-slate-400",children:[(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"})})]})]}),(0,n.jsxs)("main",{className:"flex-grow p-6 overflow-y-auto flex flex-col gap-4",children:[(0,n.jsx)(o,{sent:!1,time:"11:40",children:(0,n.jsx)("p",{children:"Hey team, I've attached the photo we need for the campaign."})}),(0,n.jsx)(o,{sent:!1,time:"11:41",children:(0,n.jsxs)("div",{className:"bg-black/20 p-1.5 rounded-lg max-w-xs relative group cursor-pointer",children:[(0,n.jsx)("img",{src:"https://picsum.photos/seed/design/400/300",className:"rounded-md",alt:"Campaign"}),(0,n.jsx)("div",{className:"absolute inset-1.5 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-md",children:(0,n.jsx)("div",{className:"bg-slate-800/80 rounded-full p-2",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-white",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"})})})})]})}),(0,n.jsxs)(o,{sent:!1,time:"11:42",children:[(0,n.jsx)("p",{children:"Here is the final brief for the project. Please review it."}),(0,n.jsxs)("div",{className:"bg-black/20 p-3 mt-2 rounded-lg flex items-center gap-3 cursor-pointer hover:bg-black/40 transition-colors",children:[(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-10 w-10 text-red-400 flex-shrink-0",viewBox:"0 0 20 20",fill:"currentColor",children:(0,n.jsx)("path",{fillRule:"evenodd",d:"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z",clipRule:"evenodd"})}),(0,n.jsxs)("div",{children:[(0,n.jsx)("p",{className:"font-medium text-slate-100",children:"Project_Brief_Final.pdf"}),(0,n.jsx)("p",{className:"text-xs text-slate-400",children:"PDF Document • 1.2 MB"})]})]})]}),(0,n.jsx)(o,{sent:!0,time:"11:45",children:(0,n.jsx)("p",{children:"Got them. Looks great! I'll start working on it now."})})]}),(0,n.jsxs)("footer",{className:"p-3 bg-[#202c33] flex items-center gap-4",children:[(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-slate-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-slate-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"})}),(0,n.jsx)("input",{type:"text",placeholder:"Type a message",className:"flex-grow bg-[#2a3942] rounded-full py-2 px-4 text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500"}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-slate-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"})})]})]})]})]}),d={info:"text-slate-400",success:"text-green-400",warn:"text-yellow-400",error:"text-red-400"},c=e=>{let{logs:s}=e;return(0,n.jsx)("div",{className:"flex-grow bg-slate-900 p-3 rounded-md overflow-y-auto h-64 lg:h-full border border-slate-700",children:(0,n.jsxs)("ul",{className:"space-y-2 text-sm font-mono",children:[s.map(e=>(0,n.jsxs)("li",{className:"flex items-start",children:[(0,n.jsx)("span",{className:"text-slate-500 mr-3",children:e.timestamp}),(0,n.jsx)("span",{className:"flex-1 ".concat(d[e.type]),children:e.message})]},e.id)),0===s.length&&(0,n.jsx)("li",{className:"text-slate-500",children:"No activity yet."})]})})},x=e=>{let{children:s,...t}=e;return(0,n.jsx)("button",{...t,className:"w-full px-4 py-3 bg-emerald-600 text-white font-bold rounded-md hover:bg-emerald-500 transition-colors duration-200 disabled:bg-slate-600 disabled:text-slate-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-emerald-400",children:s})},m={[l.Connected]:{text:"text-green-400",bg:"bg-green-500"},[l.Connecting]:{text:"text-yellow-400",bg:"bg-yellow-500"},[l.Disconnected]:{text:"text-red-400",bg:"bg-red-500"},[l.Error]:{text:"text-red-400",bg:"bg-red-500"}},h=e=>{let{status:s,logs:t,onAction:a}=e,r=m[s];return(0,n.jsxs)("div",{className:"h-full flex flex-col bg-slate-800 rounded-lg border border-slate-700 p-4 shadow-2xl",children:[(0,n.jsx)("h2",{className:"text-xl font-bold mb-4 text-slate-200",children:"Control Panel"}),(0,n.jsxs)("div",{className:"mb-4 p-3 bg-slate-900/50 rounded-md flex items-center justify-between",children:[(0,n.jsx)("span",{className:"font-semibold text-slate-300",children:"Backend Status:"}),(0,n.jsxs)("div",{className:"flex items-center gap-2",children:[(0,n.jsx)("div",{className:"w-3 h-3 rounded-full animate-pulse ".concat(r.bg)}),(0,n.jsx)("span",{className:"font-bold ".concat(r.text),children:s})]})]}),(0,n.jsxs)("div",{className:"grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-3 mb-4",children:[(0,n.jsx)(x,{onClick:()=>a("Scan for Media"),disabled:s!==l.Connected,children:"Scan for Media"}),(0,n.jsx)(x,{onClick:()=>a("Download All Images"),disabled:s!==l.Connected,children:"Download All Images"}),(0,n.jsx)(x,{onClick:()=>a("Download All Documents"),disabled:s!==l.Connected,children:"Download All Documents"})]}),(0,n.jsxs)("div",{className:"flex-grow flex flex-col min-h-0",children:[(0,n.jsx)("h3",{className:"text-lg font-semibold mb-2 text-slate-300",children:"Activity Log"}),(0,n.jsx)(c,{logs:t})]})]})},u=e=>{let{title:s,children:t}=e;return(0,n.jsxs)("div",{className:"bg-slate-800 border border-slate-700 p-6 rounded-lg",children:[(0,n.jsx)("h3",{className:"text-lg font-bold text-emerald-400 mb-3",children:s}),(0,n.jsx)("div",{className:"text-slate-300 space-y-2",children:t})]})},p=e=>{let{direction:s="down"}=e;return(0,n.jsx)("div",{className:"flex justify-center items-center ".concat("down"===s?"my-2":"mx-4"),children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-slate-500 ".concat("right"===s?"transform rotate-[-90deg]":""),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 14l-7 7m0 0l-7-7m7 7V3"})})})},g="\n/frontend\n|-- /src\n| |-- /components\n| | |-- ControlPanel.tsx\n| | |-- ScreenCaptureView.tsx\n| |-- /hooks\n| | |-- useWebSocket.ts\n| |-- /types\n| | |-- index.ts\n| |-- App.tsx\n| |-- index.tsx\n|-- /public\n| |-- index.html\n|-- package.json\n".trim(),j="\n/backend\n|-- /app\n| |-- /api\n| | |-- endpoints.py\n| | |-- schemas.py\n| |-- /services\n| | |-- automation.py\n| | |-- vision.py\n| | |-- capture.py\n| |-- main.py\n|-- requirements.txt\n|-- .env\n".trim(),f=()=>(0,n.jsxs)("section",{className:"bg-slate-800/50 border border-slate-700 rounded-lg p-6 mb-6",children:[(0,n.jsx)("h2",{className:"text-2xl font-bold text-slate-100 mb-4",children:"Application Design & Architecture Brief"}),(0,n.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[(0,n.jsx)(u,{title:"1. Introduction",children:(0,n.jsx)("p",{children:"This document outlines the conceptual design for a desktop application that interfaces with the WhatsApp desktop client. The primary goal is to provide automation capabilities and supervisiing AI agents, such as downloading media, summarise document and other business operation by programmatically observing and interacting with the WhatsApp UI through screen capture, text recognition and simulated inputs."})}),(0,n.jsxs)(u,{title:"2. Features & Workflow",children:[(0,n.jsx)("p",{className:"font-semibold",children:"Core Features:"}),(0,n.jsxs)("ul",{className:"list-disc list-inside text-slate-400",children:[(0,n.jsx)("li",{children:"Real-time screen mirroring of the WhatsApp window."}),(0,n.jsx)("li",{children:"Automated detection of media elements (images, videos, files)."}),(0,n.jsx)("li",{children:"Recognition of text instructions"}),(0,n.jsx)("li",{children:"User-initiated commands to download specific or all detected media."}),(0,n.jsx)("li",{children:"Activity logging for all operations."})]}),(0,n.jsx)("p",{className:"font-semibold mt-3",children:"Workflow:"}),(0,n.jsxs)("ol",{className:"list-decimal list-inside text-slate-400",children:[(0,n.jsx)("li",{children:"User starts the application and positions the WhatsApp window."}),(0,n.jsx)("li",{children:"The backend service continuously captures the WhatsApp window."}),(0,n.jsx)("li",{children:"The captured feed is streamed to this frontend interface."}),(0,n.jsx)("li",{children:'User clicks an action button (e.g., "Download All Images"), other WhatsApp functions.'}),(0,n.jsx)("li",{children:"The command or the captured text is sent to the backend."}),(0,n.jsx)("li",{children:'The backend uses computer vision to decode the capture text, locate and simulate a "download" and other click on the media.'})]})]}),(0,n.jsx)("div",{className:"md:col-span-2",children:(0,n.jsx)(u,{title:"3. Architecture & Technology Stack",children:(0,n.jsxs)("div",{className:"grid grid-cols-1 lg:grid-cols-3 gap-4 items-start text-center",children:[(0,n.jsxs)("div",{className:"p-4 bg-slate-900 rounded-md",children:[(0,n.jsx)("h4",{className:"font-bold text-sky-400",children:"Frontend"}),(0,n.jsx)("p",{className:"text-sm",children:"React (with TypeScript) & Tailwind CSS"}),(0,n.jsx)("p",{className:"text-xs text-slate-400 mt-1",children:"Responsible for user interface, command invocation, and displaying the screen feed & logs."})]}),(0,n.jsxs)("div",{className:"flex items-center justify-center",children:[(0,n.jsx)(p,{direction:"down"}),(0,n.jsx)("div",{className:"hidden lg:block",children:(0,n.jsx)(p,{direction:"right"})}),(0,n.jsx)("div",{className:"font-mono text-xs text-emerald-300",children:"WebSockets/HTTP"}),(0,n.jsx)("div",{className:"hidden lg:block",children:(0,n.jsx)(p,{direction:"right"})})]}),(0,n.jsxs)("div",{className:"p-4 bg-slate-900 rounded-md",children:[(0,n.jsx)("h4",{className:"font-bold text-orange-400",children:"Backend"}),(0,n.jsx)("p",{className:"text-sm",children:"Python (with FastAPI)"}),(0,n.jsx)("p",{className:"text-xs text-slate-400 mt-1",children:"Handles screen capture, LLM, Multi-modal, computer vision (e.g., OpenCV), automation (e.g., PyAutoGUI), and serves the API."})]})]})})}),(0,n.jsx)("div",{className:"md:col-span-2",children:(0,n.jsx)(u,{title:"4. Information Flow",children:(0,n.jsxs)("div",{className:"space-y-2",children:[(0,n.jsxs)("div",{className:"p-3 bg-slate-900 rounded",children:["1. ",(0,n.jsx)("strong",{children:"Screen Capture (Backend):"})," A Python script captures the WhatsApp window frame by frame."]}),(0,n.jsx)(p,{}),(0,n.jsxs)("div",{className:"p-3 bg-slate-900 rounded",children:["2. ",(0,n.jsx)("strong",{children:"Data Streaming (Backend → Frontend):"})," Frames are encoded (e.g., base64) and sent to the Frontend via WebSockets for a live feed."]}),(0,n.jsx)(p,{}),(0,n.jsxs)("div",{className:"p-3 bg-slate-900 rounded",children:["3. ",(0,n.jsx)("strong",{children:"User Instruction (Frontend → Backend):"})," User clicks an action button, sending a command (e.g., ",'{ "action": "download_images" }',") to the FastAPI backend via an HTTP POST request."]}),(0,n.jsx)(p,{}),(0,n.jsxs)("div",{className:"p-3 bg-slate-900 rounded",children:["4. ",(0,n.jsx)("strong",{children:"Computer Vision & Automation (Backend):"})," The backend processes the latest captured frame with a library like OpenCV to find coordinates of download buttons, then uses PyAutoGUI to move the mouse and click them."]}),(0,n.jsx)(p,{}),(0,n.jsxs)("div",{className:"p-3 bg-slate-900 rounded",children:["5. ",(0,n.jsx)("strong",{children:"Feedback (Backend → Frontend):"}),' The backend sends status updates and results (e.g., "Download complete") back to the frontend, which are displayed in the activity log.']})]})})}),(0,n.jsx)("div",{className:"md:col-span-2",children:(0,n.jsxs)(u,{title:"5. Proposed File Structure",children:[(0,n.jsx)("p",{children:"A typical project structure to keep the frontend and backend code organized and maintainable, whether in a single monorepo or separate repositories."}),(0,n.jsxs)("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-6 !mt-4",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("h4",{className:"font-semibold text-sky-400 mb-2",children:"Frontend (React)"}),(0,n.jsx)("pre",{className:"text-xs bg-slate-900 p-4 rounded-md text-slate-400 font-mono overflow-x-auto",children:(0,n.jsx)("code",{children:g})})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("h4",{className:"font-semibold text-orange-400 mb-2",children:"Backend (FastAPI)"}),(0,n.jsx)("pre",{className:"text-xs bg-slate-900 p-4 rounded-md text-slate-400 font-mono overflow-x-auto",children:(0,n.jsx)("code",{children:j})})]})]})]})})]})]});function w(){let[e,s]=(0,a.useState)(l.Connecting),[t,r]=(0,a.useState)([]),[o,d]=(0,a.useState)(!0),c=(0,a.useCallback)((e,s)=>{let t={id:Date.now(),timestamp:new Date().toLocaleTimeString(),message:e,type:s};r(e=>[t,...e.slice(0,99)])},[]);return(0,a.useEffect)(()=>{c("Initializing interface...","info");let e=setTimeout(()=>{s(l.Connected),c("Connection to backend service established.","success")},2e3);return()=>clearTimeout(e)},[c]),(0,n.jsxs)("div",{className:"min-h-screen flex flex-col p-4 sm:p-6 lg:p-8 bg-slate-900 font-sans",children:[(0,n.jsxs)("header",{className:"mb-6 flex justify-between items-center",children:[(0,n.jsxs)("div",{className:"flex items-center gap-3",children:[(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-8 w-8 text-emerald-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V7a2 2 0 012-2h5l2 2h5a2 2 0 012 2v10a2 2 0 01-2 2z"})}),(0,n.jsx)("h1",{className:"text-2xl font-bold text-slate-100",children:"WhatsApp Automation Interface"})]}),(0,n.jsxs)("button",{onClick:()=>d(!o),className:"px-4 py-2 bg-slate-700 text-white rounded-md hover:bg-slate-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-400",children:[o?"Hide":"Show"," App Architecture"]})]}),o&&(0,n.jsx)(f,{}),(0,n.jsxs)("main",{className:"flex-grow grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6",children:[(0,n.jsx)("div",{className:"lg:col-span-2",children:(0,n.jsx)(i,{})}),(0,n.jsx)("div",{children:(0,n.jsx)(h,{status:e,logs:t,onAction:s=>{if(e!==l.Connected)return void c("Cannot perform action. Not connected to backend.","error");c("Instruction Sent: ".concat(s),"info"),setTimeout(()=>{switch(s){case"Scan for Media":c("Backend is scanning the screen capture...","info"),setTimeout(()=>c("Found 3 images and 1 PDF.","success"),1500);break;case"Download All Images":c("Backend processing image download queue.","info"),setTimeout(()=>c("Successfully downloaded 3 images to default folder.","success"),2e3);break;case"Download All Documents":c("Backend processing document download queue.","info"),setTimeout(()=>c("No new documents found to download.","warn"),2e3)}},500)}})})]})]})}}},e=>{e.O(0,[441,255,358],()=>e(e.s=3184)),_N_E=e.O()}]);

_next/static/chunks/framework-acd67e14855de5a2.js ADDED Viewed

The diff for this file is too large to render. See raw diff

_next/static/chunks/main-app-cfcf024af855cc4e.js ADDED Viewed

	@@ -0,0 +1 @@

+ (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[358],{8252:(e,s,n)=>{Promise.resolve().then(n.t.bind(n,7150,23)),Promise.resolve().then(n.t.bind(n,1959,23)),Promise.resolve().then(n.t.bind(n,7989,23)),Promise.resolve().then(n.t.bind(n,3886,23)),Promise.resolve().then(n.t.bind(n,9766,23)),Promise.resolve().then(n.t.bind(n,5278,23)),Promise.resolve().then(n.t.bind(n,8924,23)),Promise.resolve().then(n.t.bind(n,4431,23)),Promise.resolve().then(n.bind(n,622))},9393:()=>{}},e=>{var s=s=>e(e.s=s);e.O(0,[441,255],()=>(s(1666),s(8252))),_N_E=e.O()}]);

_next/static/css/918e57c118762552.css ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ @font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8d697b304b401681-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba015fad6dcf6784-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/4cf2300e9c8272f7-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Geist Fallback;src:local("Arial");ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.00%;size-adjust:104.76%}.__className_188709{font-family:Geist,Geist Fallback;font-style:normal}.__variable_188709{--font-geist-sans:"Geist","Geist Fallback"}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/9610d9e46709d722-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/747892c23ea88013-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/93f479601ee12b01-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Geist Mono Fallback;src:local("Arial");ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.00%;size-adjust:134.59%}.__className_9a8899{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.__variable_9a8899{--font-geist-mono:"Geist Mono","Geist Mono Fallback"}
2	+
3	+ /! tailwindcss v4.1.13 \| MIT License \| https://tailwindcss.com /@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:host,:root{--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-orange-400:oklch(75% .183 55.934);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-900:oklch(37.8% .077 168.94);--color-sky-400:oklch(74.6% .16 232.661);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-geist-sans);--default-mono-font-family:var(--font-geist-mono)}}@layer base{,::backdrop,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-1\.5{inset:calc(var(--spacing)1.5)}.mx-4{margin-inline:calc(var(--spacing)4)}.my-2{margin-block:calc(var(--spacing)2)}.\!mt-4{margin-top:calc(var(--spacing)4)!important}.mt-1{margin-top:calc(var(--spacing)1)}.mt-2{margin-top:calc(var(--spacing)2)}.mt-3{margin-top:calc(var(--spacing)3)}.mt-6{margin-top:calc(var(--spacing)6)}.mr-3{margin-right:calc(var(--spacing)3)}.mb-2{margin-bottom:calc(var(--spacing)2)}.mb-3{margin-bottom:calc(var(--spacing)3)}.mb-4{margin-bottom:calc(var(--spacing)4)}.mb-6{margin-bottom:calc(var(--spacing)6)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-3{height:calc(var(--spacing)3)}.h-5{height:calc(var(--spacing)5)}.h-6{height:calc(var(--spacing)6)}.h-8{height:calc(var(--spacing)8)}.h-10{height:calc(var(--spacing)10)}.h-12{height:calc(var(--spacing)12)}.h-64{height:calc(var(--spacing)64)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing)0)}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)3)}.w-5{width:calc(var(--spacing)5)}.w-6{width:calc(var(--spacing)6)}.w-8{width:calc(var(--spacing)8)}.w-10{width:calc(var(--spacing)10)}.w-12{width:calc(var(--spacing)12)}.w-\[35\%\]{width:35%}.w-\[65\%\]{width:65%}.w-full{width:100%}.max-w-\[70\%\]{max-width:70%}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.rotate-\[-90deg\]{rotate:-90deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)2)}.gap-3{gap:calc(var(--spacing)3)}.gap-4{gap:calc(var(--spacing)4)}.gap-6{gap:calc(var(--spacing)6)}.gap-8{gap:calc(var(--spacing)8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)2)var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)2)calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)2)var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)2)calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap}.overflow-hidden,.truncate{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e+38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.rounded-bl-md{border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-emerald-500{border-color:var(--color-emerald-500)}.border-slate-600{border-color:var(--color-slate-600)}.border-slate-600\/50{border-color:#45556c80}@supports (color:color-mix(in lab,red,red)){.border-slate-600\/50{border-color:color-mix(in oklab,var(--color-slate-600)50%,transparent)}}.border-slate-700{border-color:var(--color-slate-700)}.border-transparent{border-color:#0000}.bg-\[\#0b141a\]{background-color:#0b141a}.bg-\[\#2a3942\]{background-color:#2a3942}.bg-\[\#111b21\]{background-color:#111b21}.bg-\[\#202c33\]{background-color:#202c33}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab,red,red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-900{background-color:var(--color-emerald-900)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-slate-600{background-color:var(--color-slate-600)}.bg-slate-700{background-color:var(--color-slate-700)}.bg-slate-700\/50{background-color:#31415880}@supports (color:color-mix(in lab,red,red)){.bg-slate-700\/50{background-color:color-mix(in oklab,var(--color-slate-700)50%,transparent)}}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-800\/50{background-color:#1d293d80}@supports (color:color-mix(in lab,red,red)){.bg-slate-800\/50{background-color:color-mix(in oklab,var(--color-slate-800)50%,transparent)}}.bg-slate-800\/80{background-color:#1d293dcc}@supports (color:color-mix(in lab,red,red)){.bg-slate-800\/80{background-color:color-mix(in oklab,var(--color-slate-800)80%,transparent)}}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-900\/50{background-color:#0f172b80}@supports (color:color-mix(in lab,red,red)){.bg-slate-900\/50{background-color:color-mix(in oklab,var(--color-slate-900)50%,transparent)}}.bg-yellow-500{background-color:var(--color-yellow-500)}.p-1\.5{padding:calc(var(--spacing)1.5)}.p-2{padding:calc(var(--spacing)2)}.p-3{padding:calc(var(--spacing)3)}.p-4{padding:calc(var(--spacing)4)}.p-6{padding:calc(var(--spacing)6)}.px-4{padding-inline:calc(var(--spacing)4)}.py-2{padding-block:calc(var(--spacing)2)}.py-3{padding-block:calc(var(--spacing)3)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-geist-mono)}.font-sans{font-family:var(--font-geist-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-300\/60{color:#5ee9b599}@supports (color:color-mix(in lab,red,red)){.text-emerald-300\/60{color:color-mix(in oklab,var(--color-emerald-300)60%,transparent)}}.text-emerald-400{color:var(--color-emerald-400)}.text-green-400{color:var(--color-green-400)}.text-orange-400{color:var(--color-orange-400)}.text-red-400{color:var(--color-red-400)}.text-sky-400{color:var(--color-sky-400)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.text-yellow-400{color:var(--color-yellow-400)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-slate-400::placeholder{color:var(--color-slate-400)}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover ){opacity:1}.hover\:bg-black\/40:hover{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.hover\:bg-black\/40:hover{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.hover\:bg-emerald-500:hover{background-color:var(--color-emerald-500)}.hover\:bg-slate-600:hover{background-color:var(--color-slate-600)}.hover\:bg-slate-600\/50:hover{background-color:#45556c80}@supports (color:color-mix(in lab,red,red)){.hover\:bg-slate-600\/50:hover{background-color:color-mix(in oklab,var(--color-slate-600)50%,transparent)}}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-emerald-400:focus{--tw-ring-color:var(--color-emerald-400)}.focus\:ring-emerald-500:focus{--tw-ring-color:var(--color-emerald-500)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:ring-offset-slate-800:focus{--tw-ring-offset-color:var(--color-slate-800)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-slate-600:disabled{background-color:var(--color-slate-600)}.disabled\:text-slate-400:disabled{color:var(--color-slate-400)}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:p-6{padding:calc(var(--spacing)6)}}@media (min-width:48rem){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:block{display:block}.lg\:h-full{height:100%}.lg\:min-h-\[600px\]{min-height:600px}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:p-8{padding:calc(var(--spacing)8)}}}:root{--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}body{background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif}@property --tw-rotate-x{syntax:"";inherits:false}@property --tw-rotate-y{syntax:"";inherits:false}@property --tw-rotate-z{syntax:"";inherits:false}@property --tw-skew-x{syntax:"";inherits:false}@property --tw-skew-y{syntax:"";inherits:false}@property --tw-space-y-reverse{syntax:"";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"";inherits:false;initial-value:0}@property --tw-border-style{syntax:"";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"";inherits:false}@property --tw-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"";inherits:false}@property --tw-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"";inherits:false}@property --tw-inset-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"";inherits:false}@keyframes pulse{50%{opacity:.5}}

index.html CHANGED Viewed

	@@ -1 +1,25 @@
1	- <!DOCTYPE html><!--lDSm9QMRjx_OfENYQSQG1--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/4cf2300e9c8272f7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/0c1ba77f6b982465.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-b66e35ffe30362a3.js"/><script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script><script src="/_next/static/chunks/255-fe5c522e6d28d73f.js" async=""></script><script src="/_next/static/chunks/main-app-cd42dd9a212595d7.js" async=""></script><script src="/_next/static/chunks/app/page-3f52784387c93310.js" async=""></script><meta name="next-size-adjust" content=""/><title>Create Next App</title><meta name="description" content="Generated by create next app"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_188709 __variable_9a8899 antialiased"><div hidden=""><!--$--><!--/$--></div><div class="flex h-screen bg-gray-900 text-white"><div class="flex-1 flex flex-col"><div class="bg-gray-800 p-4 flex items-center justify-between border-b border-gray-700"><div class="flex items-center space-x-3"><div class="w-8 h-8 bg-green-500 rounded flex items-center justify-center"><span class="text-white font-bold text-sm">WA</span></div><h1 class="text-xl font-semibold">Live Feed: WhatsApp Desktop</h1></div><button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">Hide App Architecture</button></div><div class="flex-1 bg-gray-800"><div class="h-full"><div class="w-80 bg-gray-800 border-r border-gray-700 h-full"><div class="p-4 border-b border-gray-700"><div class="flex items-center space-x-3 mb-4"><div class="w-10 h-10 bg-gray-600 rounded-full"></div><div class="flex-1"><div class="flex items-center space-x-2"><span class="text-lg font-medium">Chats</span><button class="text-gray-400 hover:text-white"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path d="M10 4a2 2 0 100-4 2 2 0 000 4z"></path><path d="M10 20a2 2 0 100-4 2 2 0 000 4z"></path></svg></button></div></div></div></div><div class="overflow-y-auto"><div class="p-3 hover:bg-gray-700 cursor-pointer border-b border-gray-700"><div class="flex items-start space-x-3"><div class="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center"><div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center"><span class="text-xs text-white font-bold">DT</span></div></div><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><h3 class="font-medium text-white truncate">Design Team</h3><span class="text-xs text-gray-400">11:42</span></div><p class="text-xs text-gray-400 mb-1">Alice, Bob, Charlie</p><p class="text-sm text-gray-300 truncate">Here is the final brief for the project.</p></div></div></div><div class="p-3 hover:bg-gray-700 cursor-pointer border-b border-gray-700"><div class="flex items-start space-x-3"><div class="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center"><div class="w-8 h-8 bg-gray-500 rounded-full"></div></div><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><h3 class="font-medium text-white truncate">Alex</h3><span class="text-xs text-gray-400">11:30</span></div><p class="text-sm text-gray-300 truncate">Sounds good, I&apos;ll call you later!</p></div></div></div><div class="p-3 hover:bg-gray-700 cursor-pointer border-b border-gray-700"><div class="flex items-start space-x-3"><div class="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center"><div class="w-8 h-8 bg-gray-500 rounded-full"></div></div><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><h3 class="font-medium text-white truncate">Mom</h3><span class="text-xs text-gray-400">10:55</span></div><p class="text-sm text-gray-300 truncate">Can you pick up milk on your way home?</p></div></div></div><div class="p-3 hover:bg-gray-700 cursor-pointer border-b border-gray-700"><div class="flex items-start space-x-3"><div class="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center"><div class="w-8 h-8 bg-gray-500 rounded-full"></div></div><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><h3 class="font-medium text-white truncate">Project Group</h3><span class="text-xs text-gray-400">Yesterday</span></div><p class="text-sm text-gray-300 truncate">Let's meet tomorrow at 10am.</p></div></div></div></div></div><div class="flex-1 flex flex-col"><div class="flex-1 flex flex-col bg-gray-900"><div class="bg-gray-800 p-4 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center"><span class="text-white font-bold text-sm">DT</span></div><div><h2 class="font-semibold text-white">Design Team</h2><p class="text-sm text-gray-400">Alice, Bob, Charlie</p></div></div></div><div class="flex-1 p-4 space-y-4 overflow-y-auto"><div class="flex justify-end"><div class="max-w-md bg-blue-600 rounded-lg p-3"><p class="text-white">Hey team, I've attached the photo we need for the campaign.</p><div class="mt-2 bg-gray-700 rounded-lg p-2"><div class="w-full h-32 bg-gray-600 rounded flex items-center justify-center"><span class="text-gray-400">📷 Image</span></div></div><p class="text-xs text-blue-200 mt-1">11:40</p></div></div><div class="flex justify-end"><div class="max-w-md bg-blue-600 rounded-lg p-3"><p class="text-white">Here is the final brief for the project. Please review it.</p><div class="mt-2 bg-red-600 rounded-lg p-3 flex items-center space-x-2"><div class="w-8 h-8 bg-red-700 rounded flex items-center justify-center"><span class="text-white text-xs">📄</span></div><div><p class="text-white font-medium">Project_Brief_Final.pdf</p><p class="text-red-200 text-xs">PDF Document • 1.2 MB</p></div></div><p class="text-xs text-blue-200 mt-1">11:42</p></div></div><div class="flex justify-start"><div class="max-w-md bg-green-600 rounded-lg p-3"><p class="text-white">Got them. Looks great! I'll start working on it now.</p><p class="text-xs text-green-200 mt-1">11:45</p></div></div></div><div class="bg-gray-800 p-4 border-t border-gray-700"><div class="flex items-center space-x-2"><button class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path></svg></button><div class="flex-1 bg-gray-700 rounded-full px-4 py-2"><input type="text" placeholder="Type a message" class="w-full bg-transparent text-white placeholder-gray-400 outline-none"/></div><button class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path></svg></button></div></div></div></div></div></div></div><div class="w-80 bg-gray-900 border-l border-gray-700"><div class="h-full flex flex-col"><div class="p-4 border-b border-gray-700"><h2 class="text-xl font-semibold text-white">Control Panel</h2></div><div class="p-4 border-b border-gray-700"><div class="flex items-center justify-between mb-2"><span class="text-gray-300">Backend Status:</span><div class="flex items-center space-x-2"><div class="w-2 h-2 bg-green-500 rounded-full"></div><span class="text-green-400">Connected</span></div></div></div><div class="p-4 space-y-3 border-b border-gray-700"><button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-medium transition-colors">Scan for Media</button><button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-medium transition-colors">Download All Images</button><button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-medium transition-colors">Download All Documents</button></div><div class="flex-1 p-4"><h3 class="text-lg font-medium text-white mb-3">Activity Log</h3><div class="space-y-2 text-sm"><div class="flex space-x-2"><span class="text-green-400 font-mono">11:50:51</span><span class="text-gray-300">Connection to backend service established.</span></div><div class="flex space-x-2"><span class="text-green-400 font-mono">11:50:49</span><span class="text-gray-300">Initializing interface...</span></div><div class="flex space-x-2"><span class="text-green-400 font-mono">11:50:49</span><span class="text-gray-300">Initializing interface...</span></div></div></div></div></div></div><!--$--><!--/$--><script src="/_next/static/chunks/webpack-b66e35ffe30362a3.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f\|\|[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[8924,[],\"\"]\n4:I[8288,[\"974\",\"static/chunks/app/page-3f52784387c93310.js\"],\"default\"]\n5:I[4431,[],\"OutletBoundary\"]\n7:I[5278,[],\"AsyncMetadataOutlet\"]\n9:I[4431,[],\"ViewportBoundary\"]\nb:I[4431,[],\"MetadataBoundary\"]\nc:\"$Sreact.suspense\"\ne:I[7150,[],\"\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/0c1ba77f6b982465.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"lDSm9QMRjx_OfENYQSQG1\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0c1ba77f6b982465.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L4\",null,{}],null,[\"$\",\"$L5\",null,{\"children\":[\"$L6\",[\"$\",\"$L7\",null,{\"promise\":\"$@8\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L9\",null,{\"children\":\"$La\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$c\",null,{\"fallback\":null,\"children\":\"$Ld\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"a:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n6:null\n"])</script><script>self.__next_f.push([1,"f:I[622,[],\"IconMark\"]\n8:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$Lf\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"d:\"$8:metadata\"\n"])</script></body></html>

+<!DOCTYPE html><!--87wwcH_FgNgRe3p1eolDJ--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/4cf2300e9c8272f7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="https://i.pravatar.cc/150?u=user"/><link rel="preload" as="image" href="https://i.pravatar.cc/150?u=Design Team"/><link rel="preload" as="image" href="https://i.pravatar.cc/150?u=Alex"/><link rel="preload" as="image" href="https://i.pravatar.cc/150?u=Mom"/><link rel="preload" as="image" href="https://i.pravatar.cc/150?u=Project Group"/><link rel="preload" as="image" href="https://picsum.photos/seed/design/400/300"/><link rel="stylesheet" href="/_next/static/css/918e57c118762552.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-b66e35ffe30362a3.js"/><script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script><script src="/_next/static/chunks/255-fe5c522e6d28d73f.js" async=""></script><script src="/_next/static/chunks/main-app-cfcf024af855cc4e.js" async=""></script><script src="/_next/static/chunks/app/page-a6a9e74bd013ba35.js" async=""></script><meta name="next-size-adjust" content=""/><title>Create Next App</title><meta name="description" content="Generated by create next app"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_188709 __variable_9a8899 antialiased"><div hidden=""><!--$--><!--/$--></div><div class="min-h-screen flex flex-col p-4 sm:p-6 lg:p-8 bg-slate-900 font-sans"><header class="mb-6 flex justify-between items-center"><div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V7a2 2 0 012-2h5l2 2h5a2 2 0 012 2v10a2 2 0 01-2 2z"></path></svg><h1 class="text-2xl font-bold text-slate-100">WhatsApp Automation Interface</h1></div><button class="px-4 py-2 bg-slate-700 text-white rounded-md hover:bg-slate-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-400">Hide<!-- --> App Architecture</button></header><section class="bg-slate-800/50 border border-slate-700 rounded-lg p-6 mb-6"><h2 class="text-2xl font-bold text-slate-100 mb-4">Application Design &amp; Architecture Brief</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="bg-slate-800 border border-slate-700 p-6 rounded-lg"><h3 class="text-lg font-bold text-emerald-400 mb-3">1. Introduction</h3><div class="text-slate-300 space-y-2"><p>This document outlines the conceptual design for a desktop application that interfaces with the WhatsApp desktop client. The primary goal is to provide automation capabilities and supervisiing AI agents, such as downloading media, summarise document and other business operation by programmatically observing and interacting with the WhatsApp UI through screen capture, text recognition and simulated inputs.</p></div></div><div class="bg-slate-800 border border-slate-700 p-6 rounded-lg"><h3 class="text-lg font-bold text-emerald-400 mb-3">2. Features &amp; Workflow</h3><div class="text-slate-300 space-y-2"><p class="font-semibold">Core Features:</p><ul class="list-disc list-inside text-slate-400"><li>Real-time screen mirroring of the WhatsApp window.</li><li>Automated detection of media elements (images, videos, files).</li><li>Recognition of text instructions</li><li>User-initiated commands to download specific or all detected media.</li><li>Activity logging for all operations.</li></ul><p class="font-semibold mt-3">Workflow:</p><ol class="list-decimal list-inside text-slate-400"><li>User starts the application and positions the WhatsApp window.</li><li>The backend service continuously captures the WhatsApp window.</li><li>The captured feed is streamed to this frontend interface.</li><li>User clicks an action button (e.g., &quot;Download All Images&quot;), other WhatsApp functions.</li><li>The command or the captured text is sent to the backend.</li><li>The backend uses computer vision to decode the capture text, locate and simulate a &quot;download&quot; and other click on the media.</li></ol></div></div><div class="md:col-span-2"><div class="bg-slate-800 border border-slate-700 p-6 rounded-lg"><h3 class="text-lg font-bold text-emerald-400 mb-3">3. Architecture &amp; Technology Stack</h3><div class="text-slate-300 space-y-2"><div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start text-center"><div class="p-4 bg-slate-900 rounded-md"><h4 class="font-bold text-sky-400">Frontend</h4><p class="text-sm">React (with TypeScript) &amp; Tailwind CSS</p><p class="text-xs text-slate-400 mt-1">Responsible for user interface, command invocation, and displaying the screen feed &amp; logs.</p></div><div class="flex items-center justify-center"><div class="flex justify-center items-center my-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 " fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div><div class="hidden lg:block"><div class="flex justify-center items-center mx-4"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 transform rotate-[-90deg]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div></div><div class="font-mono text-xs text-emerald-300">WebSockets/HTTP</div><div class="hidden lg:block"><div class="flex justify-center items-center mx-4"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 transform rotate-[-90deg]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div></div></div><div class="p-4 bg-slate-900 rounded-md"><h4 class="font-bold text-orange-400">Backend</h4><p class="text-sm">Python (with FastAPI)</p><p class="text-xs text-slate-400 mt-1">Handles screen capture, LLM, Multi-modal, computer vision (e.g., OpenCV), automation (e.g., PyAutoGUI), and serves the API.</p></div></div></div></div></div><div class="md:col-span-2"><div class="bg-slate-800 border border-slate-700 p-6 rounded-lg"><h3 class="text-lg font-bold text-emerald-400 mb-3">4. Information Flow</h3><div class="text-slate-300 space-y-2"><div class="space-y-2"><div class="p-3 bg-slate-900 rounded">1. <strong>Screen Capture (Backend):</strong> A Python script captures the WhatsApp window frame by frame.</div><div class="flex justify-center items-center my-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 " fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div><div class="p-3 bg-slate-900 rounded">2. <strong>Data Streaming (Backend → Frontend):</strong> Frames are encoded (e.g., base64) and sent to the Frontend via WebSockets for a live feed.</div><div class="flex justify-center items-center my-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 " fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div><div class="p-3 bg-slate-900 rounded">3. <strong>User Instruction (Frontend → Backend):</strong> User clicks an action button, sending a command (e.g., <!-- -->{ &quot;action&quot;: &quot;download_images&quot; }<!-- -->) to the FastAPI backend via an HTTP POST request.</div><div class="flex justify-center items-center my-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 " fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div><div class="p-3 bg-slate-900 rounded">4. <strong>Computer Vision &amp; Automation (Backend):</strong> The backend processes the latest captured frame with a library like OpenCV to find coordinates of download buttons, then uses PyAutoGUI to move the mouse and click them.</div><div class="flex justify-center items-center my-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-500 " fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div><div class="p-3 bg-slate-900 rounded">5. <strong>Feedback (Backend → Frontend):</strong> The backend sends status updates and results (e.g., &quot;Download complete&quot;) back to the frontend, which are displayed in the activity log.</div></div></div></div></div><div class="md:col-span-2"><div class="bg-slate-800 border border-slate-700 p-6 rounded-lg"><h3 class="text-lg font-bold text-emerald-400 mb-3">5. Proposed File Structure</h3><div class="text-slate-300 space-y-2"><p>A typical project structure to keep the frontend and backend code organized and maintainable, whether in a single monorepo or separate repositories.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-6 !mt-4"><div><h4 class="font-semibold text-sky-400 mb-2">Frontend (React)</h4><pre class="text-xs bg-slate-900 p-4 rounded-md text-slate-400 font-mono overflow-x-auto"><code>/frontend
+|-- /src
+|   |-- /components
+|   |   |-- ControlPanel.tsx
+|   |   |-- ScreenCaptureView.tsx
+|   |-- /hooks
+|   |   |-- useWebSocket.ts
+|   |-- /types
+|   |   |-- index.ts
+|   |-- App.tsx
+|   |-- index.tsx
+|-- /public
+|   |-- index.html
+|-- package.json</code></pre></div><div><h4 class="font-semibold text-orange-400 mb-2">Backend (FastAPI)</h4><pre class="text-xs bg-slate-900 p-4 rounded-md text-slate-400 font-mono overflow-x-auto"><code>/backend
+|-- /app
+|   |-- /api
+|   |   |-- endpoints.py
+|   |   |-- schemas.py
+|   |-- /services
+|   |   |-- automation.py
+|   |   |-- vision.py
+|   |   |-- capture.py
+|   |-- main.py
+|-- requirements.txt
+|-- .env</code></pre></div></div></div></div></div></div></section><main class="flex-grow grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6"><div class="lg:col-span-2"><div class="h-full min-h-[400px] lg:min-h-[600px] flex flex-col bg-slate-800 rounded-lg border border-slate-700 shadow-2xl"><div class="flex items-center p-3 bg-slate-700/50 rounded-t-lg border-b border-slate-600"><div class="flex space-x-2"><div class="w-3 h-3 rounded-full bg-red-500"></div><div class="w-3 h-3 rounded-full bg-yellow-500"></div><div class="w-3 h-3 rounded-full bg-green-500"></div></div><p class="flex-grow text-center text-sm text-slate-400 font-medium">Live Feed: WhatsApp Desktop</p></div><div class="flex-grow flex rounded-b-lg overflow-hidden"><div class="w-[35%] bg-[#111b21] border-r border-slate-600 flex flex-col"><header class="p-3 bg-[#202c33] flex justify-between items-center"><img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/150?u=user" alt="user avatar"/><div class="flex items-center gap-4 text-slate-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M15 21a6 6 0 00-9-5.197M15 21a6 6 0 006-5.197M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg></div></header><div class="flex-grow overflow-y-auto"><div class="flex items-center gap-3 p-3 cursor-pointer border-l-4 bg-slate-600 border-emerald-500"><img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/150?u=Design Team" alt="avatar"/><div class="flex-grow overflow-hidden"><div class="flex justify-between items-center"><p class="font-semibold text-slate-100 truncate">Design Team</p><p class="text-xs text-slate-400">11:42</p></div><p class="text-sm text-slate-400 truncate">Here is the final brief for the project.</p></div></div><div class="flex items-center gap-3 p-3 cursor-pointer border-l-4 border-transparent hover:bg-slate-600/50"><img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/150?u=Alex" alt="avatar"/><div class="flex-grow overflow-hidden"><div class="flex justify-between items-center"><p class="font-semibold text-slate-100 truncate">Alex</p><p class="text-xs text-slate-400">11:30</p></div><p class="text-sm text-slate-400 truncate">Sounds good, I&#x27;ll call you later!</p></div></div><div class="flex items-center gap-3 p-3 cursor-pointer border-l-4 border-transparent hover:bg-slate-600/50"><img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/150?u=Mom" alt="avatar"/><div class="flex-grow overflow-hidden"><div class="flex justify-between items-center"><p class="font-semibold text-slate-100 truncate">Mom</p><p class="text-xs text-slate-400">10:55</p></div><p class="text-sm text-slate-400 truncate">Can you pick up milk on your way home?</p></div></div><div class="flex items-center gap-3 p-3 cursor-pointer border-l-4 border-transparent hover:bg-slate-600/50"><img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/150?u=Project Group" alt="avatar"/><div class="flex-grow overflow-hidden"><div class="flex justify-between items-center"><p class="font-semibold text-slate-100 truncate">Project Group</p><p class="text-xs text-slate-400">Yesterday</p></div><p class="text-sm text-slate-400 truncate">Let&#x27;s meet tomorrow at 10am.</p></div></div></div></div><div class="w-[65%] bg-[#0b141a] flex flex-col" style="background-image:url(&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAD9JREFUaEPt0AEBAAAAwqD1T20ND6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBgxUwAAU+a6QcAAAAASUVORK5CYII=&#x27;);background-blend-mode:overlay;background-size:400px;background-color:rgba(11, 20, 26, 0.95)"><header class="p-3 bg-[#202c33] flex justify-between items-center border-b border-slate-600/50"><div class="flex items-center gap-4"><img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/150?u=Design Team" alt="group avatar"/><div><p class="font-semibold text-slate-100">Design Team</p><p class="text-xs text-slate-400">Alice, Bob, Charlie</p></div></div><div class="flex items-center gap-4 text-slate-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg></div></header><main class="flex-grow p-6 overflow-y-auto flex flex-col gap-4"><div class="flex items-end gap-2 justify-start"><div class="max-w-[70%] p-3 rounded-xl bg-slate-700 rounded-bl-md"><p>Hey team, I&#x27;ve attached the photo we need for the campaign.</p><p class="text-xs mt-1 text-right text-slate-400">11:40</p></div></div><div class="flex items-end gap-2 justify-start"><div class="max-w-[70%] p-3 rounded-xl bg-slate-700 rounded-bl-md"><div class="bg-black/20 p-1.5 rounded-lg max-w-xs relative group cursor-pointer"><img src="https://picsum.photos/seed/design/400/300" class="rounded-md" alt="Campaign"/><div class="absolute inset-1.5 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-md"><div class="bg-slate-800/80 rounded-full p-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg></div></div></div><p class="text-xs mt-1 text-right text-slate-400">11:41</p></div></div><div class="flex items-end gap-2 justify-start"><div class="max-w-[70%] p-3 rounded-xl bg-slate-700 rounded-bl-md"><p>Here is the final brief for the project. Please review it.</p><div class="bg-black/20 p-3 mt-2 rounded-lg flex items-center gap-3 cursor-pointer hover:bg-black/40 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg><div><p class="font-medium text-slate-100">Project_Brief_Final.pdf</p><p class="text-xs text-slate-400">PDF Document • 1.2 MB</p></div></div><p class="text-xs mt-1 text-right text-slate-400">11:42</p></div></div><div class="flex items-end gap-2 justify-end"><div class="max-w-[70%] p-3 rounded-xl bg-emerald-900 rounded-br-md"><p>Got them. Looks great! I&#x27;ll start working on it now.</p><p class="text-xs mt-1 text-right text-emerald-300/60">11:45</p></div></div></main><footer class="p-3 bg-[#202c33] flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg><input type="text" placeholder="Type a message" class="flex-grow bg-[#2a3942] rounded-full py-2 px-4 text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500"/><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg></footer></div></div></div></div><div><div class="h-full flex flex-col bg-slate-800 rounded-lg border border-slate-700 p-4 shadow-2xl"><h2 class="text-xl font-bold mb-4 text-slate-200">Control Panel</h2><div class="mb-4 p-3 bg-slate-900/50 rounded-md flex items-center justify-between"><span class="font-semibold text-slate-300">Backend Status:</span><div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full animate-pulse bg-yellow-500"></div><span class="font-bold text-yellow-400">Connecting</span></div></div><div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-3 mb-4"><button disabled="" class="w-full px-4 py-3 bg-emerald-600 text-white font-bold rounded-md hover:bg-emerald-500 transition-colors duration-200 disabled:bg-slate-600 disabled:text-slate-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-emerald-400">Scan for Media</button><button disabled="" class="w-full px-4 py-3 bg-emerald-600 text-white font-bold rounded-md hover:bg-emerald-500 transition-colors duration-200 disabled:bg-slate-600 disabled:text-slate-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-emerald-400">Download All Images</button><button disabled="" class="w-full px-4 py-3 bg-emerald-600 text-white font-bold rounded-md hover:bg-emerald-500 transition-colors duration-200 disabled:bg-slate-600 disabled:text-slate-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 focus:ring-emerald-400">Download All Documents</button></div><div class="flex-grow flex flex-col min-h-0"><h3 class="text-lg font-semibold mb-2 text-slate-300">Activity Log</h3><div class="flex-grow bg-slate-900 p-3 rounded-md overflow-y-auto h-64 lg:h-full border border-slate-700"><ul class="space-y-2 text-sm font-mono"><li class="text-slate-500">No activity yet.</li></ul></div></div></div></div></main></div><!--$--><!--/$--><script src="/_next/static/chunks/webpack-b66e35ffe30362a3.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[8924,[],\"\"]\n4:I[1959,[],\"ClientPageRoot\"]\n5:I[9454,[\"974\",\"static/chunks/app/page-a6a9e74bd013ba35.js\"],\"default\"]\n8:I[4431,[],\"OutletBoundary\"]\na:I[5278,[],\"AsyncMetadataOutlet\"]\nc:I[4431,[],\"ViewportBoundary\"]\ne:I[4431,[],\"MetadataBoundary\"]\nf:\"$Sreact.suspense\"\n11:I[7150,[],\"\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/918e57c118762552.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"87wwcH_FgNgRe3p1eolDJ\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/918e57c118762552.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L4\",null,{\"Component\":\"$5\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@6\",\"$@7\"]}],null,[\"$\",\"$L8\",null,{\"children\":[\"$L9\",[\"$\",\"$La\",null,{\"promise\":\"$@b\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$Le\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$f\",null,{\"fallback\":null,\"children\":\"$L10\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"6:{}\n7:\"$0:f:0:1:2:children:1:props:children:0:props:params\"\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n9:null\n"])</script><script>self.__next_f.push([1,"12:I[622,[],\"IconMark\"]\nb:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$L12\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"10:\"$b:metadata\"\n"])</script></body></html>

index.txt CHANGED Viewed

@@ -1,19 +1,22 @@
 1:"$Sreact.fragment"
 2:I[9766,[],""]
 3:I[8924,[],""]
-4:I[8288,["974","static/chunks/app/page-3f52784387c93310.js"],"default"]
-5:I[4431,[],"OutletBoundary"]
-7:I[5278,[],"AsyncMetadataOutlet"]
-9:I[4431,[],"ViewportBoundary"]
-b:I[4431,[],"MetadataBoundary"]
-c:"$Sreact.suspense"
-e:I[7150,[],""]
 :HL["/_next/static/media/4cf2300e9c8272f7-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 :HL["/_next/static/media/93f479601ee12b01-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-:HL["/_next/static/css/0c1ba77f6b982465.css","style"]
-0:{"P":null,"b":"lDSm9QMRjx_OfENYQSQG1","p":"","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0c1ba77f6b982465.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_188709 __variable_9a8899 antialiased","children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{}],null,["$","$L5",null,{"children":["$L6",["$","$L7",null,{"promise":"$@8"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$L9",null,{"children":"$La"}],["$","meta",null,{"name":"next-size-adjust","content":""}]],["$","$Lb",null,{"children":["$","div",null,{"hidden":true,"children":["$","$c",null,{"fallback":null,"children":"$Ld"}]}]}]]}],false]],"m":"$undefined","G":["$e",[]],"s":false,"S":true}
-a:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
-6:null
-f:I[622,[],"IconMark"]
-8:{"metadata":[["$","title","0",{"children":"Create Next App"}],["$","meta","1",{"name":"description","content":"Generated by create next app"}],["$","link","2",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}],["$","$Lf","3",{}]],"error":null,"digest":"$undefined"}
-d:"$8:metadata"

 1:"$Sreact.fragment"
 2:I[9766,[],""]
 3:I[8924,[],""]
+4:I[1959,[],"ClientPageRoot"]
+5:I[9454,["974","static/chunks/app/page-a6a9e74bd013ba35.js"],"default"]
+8:I[4431,[],"OutletBoundary"]
+a:I[5278,[],"AsyncMetadataOutlet"]
+c:I[4431,[],"ViewportBoundary"]
+e:I[4431,[],"MetadataBoundary"]
+f:"$Sreact.suspense"
+11:I[7150,[],""]
 :HL["/_next/static/media/4cf2300e9c8272f7-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 :HL["/_next/static/media/93f479601ee12b01-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
+:HL["/_next/static/css/918e57c118762552.css","style"]
+0:{"P":null,"b":"87wwcH_FgNgRe3p1eolDJ","p":"","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/918e57c118762552.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_188709 __variable_9a8899 antialiased","children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],null,["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],["$","meta",null,{"name":"next-size-adjust","content":""}]],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[]],"s":false,"S":true}
+6:{}
+7:"$0:f:0:1:2:children:1:props:children:0:props:params"
+d:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+9:null
+12:I[622,[],"IconMark"]
+b:{"metadata":[["$","title","0",{"children":"Create Next App"}],["$","meta","1",{"name":"description","content":"Generated by create next app"}],["$","link","2",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}],["$","$L12","3",{}]],"error":null,"digest":"$undefined"}
+10:"$b:metadata"