https://music-prod.com/assets/ScreenShareAIPage-Dann6PNB.js

1import{j as e}from"./vendor-query-REUEbryQ.js";import{r as s,u as t}from"./vendor-react-tIoPkRwd.js";import{i as r,L as a,f as n,B as i,S as o,u as l,s as c,g as d,e as m}from"./index--0ud_HHy.js";import{T as u}from"./textarea-C1OSlJeR.js";import{M as h}from"./monitor-CWBouFUT.js";import{C as x}from"./camera-D73KhaiV.js";import{M as p}from"./index-rNQTXiW8.js";import{C as g}from"./circle-alert-CObcGLbk.js";import{T as f,a as j,b as y,c as b}from"./ToolUsageWrapper-u4045puU.js";import{M as v}from"./MainLayout-Ksz7zHhr.js";import{EmbedAuthBar as w}from"./EmbedAuthBar-BTglXdYk.js";import{u as N}from"./useEmbedMode-CVdryXa-.js";import{VersionFooter as k}from"./VersionFooter-CKh0QyN6.js";import{S}from"./SEO-BruwIufJ.js";import{L as A}from"./lock-DAUsFfZV.js";import{Z as T}from"./zap-CAAuRlZR.js";import{E as M}from"./eye-ChKsn8Jv.js";import{M as C}from"./message-square-BEMCGeba.js";import{W as I}from"./wand-sparkles-CiwRmzuC.js";import"./vendor-ui-BVtOlGvj.js";import"./vendor-supabase-BcbvpzCe.js";import"./AdUnit-CEQHIbmD.js";import"./chevron-down-D56Is0vg.js";import"./UserMenu-G0fpOx5r.js";import"./dropdown-menu-BhjWH65A.js";import"./chevron-right-0eTVlG1M.js";import"./check-ekX4Q09Q.js";import"./circle-DNRAjJQk.js";import"./sparkles-B8pZP29O.js";import"./star-MSjiZEel.js";import"./ThemeToggle-DvFkM08t.js";import"./book-open-aITWI1Zk.js";import"./music-CBz0HdiS.js";import"./download-yNQ0nzkl.js";import"./credit-card-CYKdopSW.js";import"./useVyreExpansions-78Z_uhHg.js";import"./memberCodes-D8CLuRSK.js";import"./useAdPlacements-C3kKsaFs.js";import"./useCourseCategories-CHRMRi9s.js";import"./toolVersions-n8IhcncZ.js";import"./audio-lines-DULcR7cS.js";import"./piano-DpUfrck2.js";import"./volume-2-BGXhlmMK.js";import"./graduation-cap-ByWPWr0j.js";import"./arrow-left-DdlyX7wK.js";import"./wrench-Ct-JOGKM.js";import"./circle-help-DHLoPmf4.js";import"./ChangelogDialog-BzgFCNA6.js";import"./scroll-area-BAEFWRJq.js";import"./label-BLxROBsa.js";import"./message-square-text-BD9gOrla.js";import"./external-link-D4r3JqVx.js";import"./info-O2IQVtLI.js";import"./use-mobile-B4hqzuWL.js";const E=r("MonitorOff",[["path",{d:"M17 17H4a2 2 0 0 1-2-2V5c0-1.5 1-2 1-2",key:"k0q8oc"}],["path",{d:"M22 15V5a2 2 0 0 0-2-2H9",key:"cp1ac0"}],["path",{d:"M8 21h8",key:"1ev6f3"}],["path",{d:"M12 17v4",key:"1riwvh"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);function L({screenshotSrc:t,annotations:r}){const a=s.useRef(null),[n,i]=s.useState({width:0,height:0});return s.useEffect(()=>{const e=new Image;e.onload=()=>{const s=Math.min(1,600/e.width),t=Math.round(e.width*s),n=Math.round(e.height*s);i({width:t,height:n});const o=a.current;if(!o)return;o.width=t,o.height=n;const l=o.getContext("2d");l&&(l.drawImage(e,0,0,t,n),r.forEach(e=>{const s=e.x*t,r=e.y*n,a=.04*Math.min(t,n);if("circle"===e.type)l.beginPath(),l.arc(s,r,a+6,0,2*Math.PI),l.strokeStyle="rgba(255, 59, 48, 0.3)",l.lineWidth=4,l.stroke(),l.beginPath(),l.arc(s,r,a,0,2*Math.PI),l.strokeStyle="#ff3b30",l.lineWidth=3,l.stroke();else{const e=.1*Math.min(t,n);l.beginPath(),l.moveTo(s,r-e),l.lineTo(s,r-4),l.strokeStyle="#ff3b30",l.lineWidth=3,l.stroke(),l.beginPath(),l.moveTo(s,r),l.lineTo(s-7,r-12),l.lineTo(s+7,r-12),l.closePath(),l.fillStyle="#ff3b30",l.fill()}if(e.label){l.font="bold 11px system-ui, -apple-system, sans-serif";const i=6,o=4,c=18,d=l.measureText(e.label).width+2*i;let m=s-d/2,u="arrow"===e.type?r-.1*Math.min(t,n)-c-4:r-a-c-8;m=Math.max(2,Math.min(t-d-2,m)),u=Math.max(2,u),l.fillStyle="rgba(255, 59, 48, 0.92)",l.beginPath(),l.moveTo(m+4,u),l.lineTo(m+d-4,u),l.quadraticCurveTo(m+d,u,m+d,u+4),l.lineTo(m+d,u+c-4),l.quadraticCurveTo(m+d,u+c,m+d-4,u+c),l.lineTo(m+4,u+c),l.quadraticCurveTo(m,u+c,m,u+c-4),l.lineTo(m,u+4),l.quadraticCurveTo(m,u,m+4,u),l.closePath(),l.fill(),l.fillStyle="#ffffff",l.fillText(e.label,m+i,u+c-o-1)}}))},e.src=t},[t,r]),0===r.length?null:e.jsxs("div",{className:"rounded-lg overflow-hidden border border-border mt-2",children:[e.jsxs("div",{className:"text-xs text-muted-foreground bg-muted/50 px-2 py-1 flex items-center gap-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-destructive"}),"AI annotated screenshot"]}),e.jsx("canvas",{ref:a,width:n.width,height:n.height,className:"w-full h-auto"})]})}function P({text:t}){const[r,n]=s.useState("");return s.useEffect(()=>{const e=setInterval(()=>{n(e=>e.length>=3?"":e+".")},500);return()=>clearInterval(e)},[]),e.jsxs("div",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx(a,{className:"w-4 h-4 animate-spin text-primary"}),e.jsxs("span",{className:"font-medium",children:[t,e.jsx("span",{className:"inline-block w-4 text-left",children:r})]})]})}function D(e){const s=/\[ANNOTATION:x:([\d.]+)\|y:([\d.]+)\|type:(circle|arrow)\|label:([^\]]+)\]/g,t=[];let r;for(;null!==(r=s.exec(e));)t.push({x:parseFloat(r[1]),y:parseFloat(r[2]),type:r[3],label:r[4]});return{cleanContent:e.replace(s,"").trim(),annotations:t}}const W=[{value:"logic",label:"Logic Pro"},{value:"fl",label:"FL Studio"},{value:"ableton",label:"Ableton Live"}];function q(){var t;const[r,d]=s.useState("logic"),[m,f]=s.useState(!1),[j,y]=s.useState([]),[b,v]=s.useState(""),[w,N]=s.useState(!1),[k,S]=s.useState(null),[A,T]=s.useState("Thinking"),M=s.useRef(null),C=s.useRef(null),I=s.useRef(null);s.useEffect(()=>{var e;null==(e=I.current)||e.scrollIntoView({behavior:"smooth"})},[j]),s.useEffect(()=>()=>{var e;

1null==(e=C.current)||e.getTracks().forEach(e=>e.stop())},[]);const q=s.useMemo(()=>{for(let e=j.length-1;e>=0;e--)if("user"===j[e].role&&j[e].screenshot)return j[e].screenshot;return null},[j]),O=s.useCallback(()=>{const e=M.current;if(!e||!m)return null;const s=document.createElement("canvas"),t=Math.min(1,1280/e.videoWidth);s.width=e.videoWidth*t,s.height=e.videoHeight*t;const r=s.getContext("2d");return r?(r.drawImage(e,0,0,s.width,s.height),s.toDataURL("image/jpeg",.7)):null},[m]),F=async()=>{var e,s,t;const a=b.trim();if(!a||w)return;S(null);const n=O();T(function(e,s){const t=e.toLowerCase();return s?t.includes("where")||t.includes("find")||t.includes("show me")||t.includes("point")?"Scanning your screen":t.includes("mix")||t.includes("level")||t.includes("volume")?"Analyzing your mixer settings":t.includes("eq")||t.includes("frequenc")?"Looking at your EQ curve":t.includes("compressor")||t.includes("compress")?"Checking your compressor settings":t.includes("effect")||t.includes("plugin")||t.includes("vst")?"Examining your plugin chain":t.includes("arrangement")||t.includes("structure")||t.includes("section")?"Reviewing your arrangement":t.includes("piano roll")||t.includes("midi")||t.includes("note")?"Analyzing your MIDI data":"Analyzing your screenshot":t.includes("mix")?"Thinking about mixing techniques":t.includes("master")?"Thinking about mastering approach":t.includes("chord")||t.includes("harmony")?"Working out the harmony":t.includes("sound design")||t.includes("synth")?"Designing the sound":t.includes("drum")||t.includes("beat")?"Crafting the rhythm":t.includes("bass")?"Shaping the low end":"Thinking"}(a,!!n));const i={role:"user",content:a,screenshot:n||void 0},o=[...j,i];y(o),v(""),N(!0);let l="";try{const{data:{session:a}}=await c.auth.getSession(),n=null==a?void 0:a.access_token,i=o.map(e=>{if(e.screenshot){const s=[{type:"image_url",image_url:{url:e.screenshot}}];return e.content&&s.push({type:"text",text:e.content}),{role:e.role,content:s}}return{role:e.role,content:e.content}}),d={"Content-Type":"application/json"};n&&(d.Authorization=`Bearer ${n}`);const m=await fetch("https://wfpeajmdojcjqyrsnxbk.supabase.co/functions/v1/music-prod-ai",{method:"POST",headers:d,body:JSON.stringify({messages:i,expertMode:r,isTrialMode:!1})});if(!m.ok){const e=await m.json();return"LIMIT_REACHED"===e.code?S("Daily query limit reached. Come back tomorrow or purchase bonus queries."):"NOT_SUBSCRIBED"===e.code?S("A Music-Prod+ subscription is required to use Screen Share AI."):S(e.error||"Something went wrong. Please try again."),y(e=>e.slice(0,-1)),void N(!1)}if(!m.body)throw new Error("No response body");const u=m.body.getReader(),h=new TextDecoder;let x="",p=!1;for(;;){const{done:r,value:a}=await u.read();if(r)break;let n;for(x+=h.decode(a,{stream:!0});-1!==(n=x.indexOf("\n"));){let r=x.slice(0,n);if(x=x.slice(n+1),r.endsWith("\r")&&(r=r.slice(0,-1)),r.startsWith(":")||""===r.trim())continue;if(!r.startsWith("data: "))continue;const a=r.slice(6).trim();if("[DONE]"===a)break;try{const r=JSON.parse(a);if("usage_update"===r.type)continue;const n=null==(t=null==(s=null==(e=r.choices)?void 0:e[0])?void 0:s.delta)?void 0:t.content;if(n){p||(y(e=>[...e,{role:"assistant",content:""}]),p=!0),l+=n;const{cleanContent:e,annotations:s}=D(l);y(t=>{const r=[...t];return r[r.length-1]={role:"assistant",content:e,annotations:s.length>0?s:void 0},r})}}catch{x=r+"\n"+x;break}}}}catch(d){S("Failed to get a response. Please try again."),y(e=>e.slice(0,-1))}finally{N(!1)}};return e.jsxs("div",{className:"flex flex-col lg:flex-row gap-4 min-h-[600px]",children:[e.jsxs("div",{className:"w-full lg:w-[400px] lg:shrink-0 space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"text-sm font-medium text-muted-foreground mb-2 block",children:"Select your DAW"}),e.jsx("div",{className:"flex gap-2",children:W.map(s=>e.jsx("button",{onClick:()=>d(s.value),className:n("px-3 py-1.5 rounded-lg text-xs font-medium transition-all border",r===s.value?"bg-primary text-primary-foreground border-primary":"bg-muted/50 text-muted-foreground border-border hover:bg-muted"),children:s.label},s.value))})]}),e.jsxs("div",{className:"rounded-lg border border-border overflow-hidden bg-muted/20",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/40",children:[e.jsxs("span",{className:"text-xs font-medium flex items-center gap-1.5",children:[e.jsx(h,{className:"w-3.5 h-3.5"}),"Screen Preview"]}),e.jsx(i,{size:"sm",variant:m?"destructive":"default",onClick:m?()=>{var e;

1null==(e=C.current)||e.getTracks().forEach(e=>e.stop()),C.current=null,M.current&&(M.current.srcObject=null),f(!1)}:async()=>{try{const e=await navigator.mediaDevices.getDisplayMedia({video:{width:{ideal:1920},height:{ideal:1080}},audio:!1});C.current=e,M.current&&(M.current.srcObject=e),f(!0),e.getVideoTracks()[0].addEventListener("ended",()=>{f(!1),C.current=null})}catch(e){"NotAllowedError"!==e.name&&l.error("Screen sharing is not supported in this browser or context.")}},className:"gap-1.5 h-7 text-xs",children:m?e.jsxs(e.Fragment,{children:[e.jsx(E,{className:"w-3.5 h-3.5"})," Stop"]}):e.jsxs(e.Fragment,{children:[e.jsx(h,{className:"w-3.5 h-3.5"})," Share Screen"]})})]}),e.jsxs("div",{className:"aspect-video bg-black/80 flex items-center justify-center relative",children:[e.jsx("video",{ref:M,autoPlay:!0,playsInline:!0,muted:!0,className:n("w-full h-full object-contain",!m&&"hidden")}),!m&&e.jsxs("div",{className:"text-center text-muted-foreground p-6",children:[e.jsx(h,{className:"w-10 h-10 mx-auto mb-2 opacity-40"}),e.jsx("p",{className:"text-xs",children:'Click "Share Screen" to start'}),e.jsx("p",{className:"text-[10px] mt-1 opacity-60",children:"Captured on each message"})]})]})]}),e.jsxs("div",{className:"text-xs text-muted-foreground space-y-1 px-1",children:[e.jsxs("p",{children:["💡 ",e.jsx("strong",{children:"Tip:"}),' Ask "where do I click to..." and the AI will annotate your screenshot with markers.']}),e.jsx("p",{children:"📸 A screenshot is automatically captured with each message you send."})]})]}),e.jsxs("div",{className:"flex-1 flex flex-col rounded-lg border border-border bg-card min-h-[500px] lg:min-h-0",children:[e.jsxs("div",{className:"flex-1 overflow-y-auto p-4 space-y-4",children:[0===j.length&&e.jsxs("div",{className:"text-center text-muted-foreground py-12",children:[e.jsx(x,{className:"w-10 h-10 mx-auto mb-3 opacity-40"}),e.jsx("p",{className:"text-sm font-medium",children:"Share your screen and ask a question"}),e.jsx("p",{className:"text-xs mt-1 opacity-60",children:"The AI will see a screenshot of your DAW with each message."}),e.jsx("p",{className:"text-xs mt-0.5 opacity-60",children:'Try asking "Where do I click to add an EQ?"'})]}),j.map((s,t)=>e.jsx("div",{className:n("flex gap-3","user"===s.role?"justify-end":"justify-start"),children:e.jsxs("div",{className:n("max-w-[85%] rounded-lg px-4 py-3 text-sm","user"===s.role?"bg-primary text-primary-foreground":"bg-muted"),children:[s.screenshot&&"user"===s.role&&e.jsx("div",{className:"mb-2 rounded overflow-hidden border border-primary-foreground/20",children:e.jsx("img",{src:s.screenshot,alt:"Screen capture",className:"w-full max-w-[300px] h-auto"})}),"assistant"===s.role?e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"prose prose-sm dark:prose-invert max-w-none",children:e.jsx(p,{children:s.content})}),s.annotations&&s.annotations.length>0&&q&&e.jsx(L,{screenshotSrc:q,annotations:s.annotations})]}):e.jsx("p",{className:"whitespace-pre-wrap",children:s.content})]})},t)),w&&"assistant"!==(null==(t=j[j.length-1])?void 0:t.role)&&e.jsx("div",{className:"flex justify-start",children:e.jsx("div",{className:"bg-muted rounded-lg px-4 py-3",children:e.jsx(P,{text:A})})}),e.jsx("div",{ref:I})]}),k&&e.jsxs("div",{className:"mx-4 mb-2 flex items-center gap-2 text-sm text-destructive bg-destructive/10 rounded-lg px-3 py-2",children:[e.jsx(g,{className:"w-4 h-4 shrink-0"}),k]}),e.jsxs("div",{className:"border-t border-border p-3 flex gap-2",children:[e.jsx(u,{value:b,onChange:e=>v(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),F())},placeholder:m?"Ask about what you see on screen...":"Share your screen first, then ask...",className:"min-h-[44px] max-h-[120px] resize-none",rows:1}),e.jsx(i,{onClick:F,disabled:!b.trim()||w,size:"icon",className:"shrink-0 h-[44px] w-[44px]",children:w?e.jsx(a,{className:"w-4 h-4 animate-spin"}):e.jsx(o,{className:"w-4 h-4"})})]})]})]})}const O=[{icon:M,text:"The AI sees your DAW screen in real-time"},{icon:C,text:"Ask questions about mixing, sound design, or arrangement"},{icon:I,text:"Get specific, actionable feedback for Logic Pro, FL Studio, or Ableton Live"}],F=()=>{const{isEmbedMode:s}

1=N(),{isLoggedIn:r,isSubscribed:a,userName:n,userEmail:o,logout:l}=d(),c=t(),{openSubscriptionModal:u}=m(),x=!a&&e.jsxs("div",{className:"flex flex-col items-center justify-center py-12 px-4 text-center gap-8 max-w-2xl mx-auto",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto",children:e.jsx(h,{className:"w-7 h-7 text-primary"})}),e.jsx("h2",{className:"text-2xl font-bold font-heading",children:"DAW Assistant"}),e.jsx("p",{className:"text-muted-foreground text-sm leading-relaxed max-w-lg mx-auto",children:"Share your screen and get real-time AI guidance while you produce. The assistant watches your DAW and gives you specific, contextual help."})]}),e.jsx("div",{className:"w-full max-w-md space-y-3 text-left",children:O.map(({icon:s,text:t})=>e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded-lg bg-muted flex items-center justify-center shrink-0 mt-0.5",children:e.jsx(s,{className:"w-4 h-4 text-foreground/70"})}),e.jsx("p",{className:"text-sm text-foreground/80 pt-1",children:t})]},t))}),e.jsxs("div",{className:"flex flex-col gap-2.5 w-full max-w-xs",children:[!r&&e.jsxs(i,{variant:"outline",onClick:()=>c("/login"),className:"w-full gap-2",children:[e.jsx(A,{className:"w-4 h-4"}),"Sign in first"]}),e.jsxs(i,{onClick:u,className:"w-full gap-2",children:[e.jsx(T,{className:"w-4 h-4"}),"Upgrade to Music-Prod+"]}),e.jsx("p",{className:"text-[11px] text-muted-foreground",children:"Included with Music-Prod+. Uses your daily AI query allowance."})]})]});return s?e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(S,{title:"DAW Assistant - AI Screen Share",description:"Share your screen and get real-time AI help with Logic Pro, FL Studio, or Ableton Live.",url:"/tools/screen-share-ai"}),e.jsx(w,{isLoggedIn:r,isSubscribed:a,userName:n,userEmail:o,onLogin:()=>c("/login"),onLogout:async()=>{await l(),c("/")}}),e.jsx("main",{className:"container mx-auto px-4 py-8",children:e.jsx("section",{className:"max-w-4xl mx-auto",children:x||e.jsx(f,{toolSlug:"screen-share-ai",children:e.jsx(q,{})})})}),e.jsx(k,{})]}):e.jsxs(v,{children:[e.jsx(S,{title:"DAW Assistant - AI Screen Share",description:"Share your screen and get real-time AI help with Logic Pro, FL Studio, or Ableton Live.",url:"/tools/screen-share-ai"}),e.jsx("div",{className:"container mx-auto px-4 py-8",children:e.jsxs("div",{className:"max-w-7xl mx-auto",children:[e.jsx(j,{}),e.jsx(y,{steps:b["screen-share-ai"]}),x||e.jsx(f,{toolSlug:"screen-share-ai",children:e.jsx(q,{})})]})})]})};export{F as default};