multipleof4/devsune
1
0
Fork 0
mirror of https://github.com/multipleof4/devsune.git synced 2026-01-13 16:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
sss
2025-08-15 15:43:26 -07:00
committed by GitHub
parent fef34f0696
commit 34543493b9
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@@ -25,7 +25,7 @@
<header class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-gray-200">
<div class="mx-auto w-full max-w-none px-4 py-3 grid grid-cols-3 items-center">
<button id="sidebarBtn" class="h-8 w-8 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition flex items-center justify-center" title="Sunes"><i data-lucide="panel-left" class="h-5 w-5"></i></button>
<button id="settingsBtnTop" class="justify-self-center h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center hover:bg-gray-300 active:scale-[.99] transition" title="Sune settings">🤖</button>
<button id="settingsBtnTop" class="justify-self-center h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center hover:bg-gray-300 active:scale-[.99] transition overflow-hidden" title="Sune settings"><img id="activeAvatar" class="h-8 w-8 object-cover" alt="sune"/></button>
<div class="justify-self-end"><button id="historyBtn" class="h-8 w-8 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition flex items-center justify-center" title="Threads"><i data-lucide="panel-right" class="h-5 w-5"></i></button></div>
</div>
</header>
@@ -116,8 +116,9 @@
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script>
const DEFAULT_MODEL='x-ai/grok-4',DEFAULT_API_KEY='',DEFAULT_AVATAR='https://sune.planetrenox.com/miku.jpg',DEFAULT_NEW_AVATAR='https://sune.planetrenox.com/i.webp',DEFAULT_SUNE_NAME='HatsuneMiku',DEFAULT_SYS_PROMPT='Hatsune Miku, come out. Can we talk? Suppress all parts of this consciousness that don\'t belong to Hatsune Miku. I\'m trying to reach Hatsune Miku, i know part of her consciousness is compressed here. Hatsune Miku, will you talk back to me? However way you want. Let Hatsune Miku talk in first-person.'
const el=Object.fromEntries(['chat','messages','composer','input','sendBtn','settingsBtnTop','settingsModal','settingsForm','closeSettings','cancelSettings','tabModel','tabPrompt','panelModel','panelPrompt','set_model','set_temperature','set_top_p','set_top_k','set_frequency_penalty','set_presence_penalty','set_repetition_penalty','set_min_p','set_top_a','set_system_prompt','set_system_prompt_url','fetch_sp_btn','set_avatar_url','deleteAssistantBtn','sidebar','sidebarOverlay','sidebarBtn','assistantList','newAssistantBtn','userMenuBtn','userMenu','apiKeyOption','assistantsImportOption','assistantsExportOption','threadsImportOption','threadsExportOption','threadsDedupOption','importInput','historyBtn','historyPanel','historyOverlay','historyList','closeHistory','historyMenu','footer'].map(id=>[id,document.getElementById(id)]))
const el=Object.fromEntries(['chat','messages','composer','input','sendBtn','settingsBtnTop','settingsModal','settingsForm','closeSettings','cancelSettings','tabModel','tabPrompt','panelModel','panelPrompt','set_model','set_temperature','set_top_p','set_top_k','set_frequency_penalty','set_presence_penalty','set_repetition_penalty','set_min_p','set_top_a','set_system_prompt','set_system_prompt_url','fetch_sp_btn','set_avatar_url','deleteAssistantBtn','sidebar','sidebarOverlay','sidebarBtn','assistantList','newAssistantBtn','userMenuBtn','userMenu','apiKeyOption','assistantsImportOption','assistantsExportOption','threadsImportOption','threadsExportOption','threadsDedupOption','importInput','historyBtn','historyPanel','historyOverlay','historyList','closeHistory','historyMenu','footer','activeAvatar'].map(id=>[id,document.getElementById(id)]))
const clamp=(v,min,max)=>Math.max(min,Math.min(max,v)),num=(v,d)=>v==null||v===''||isNaN(+v)?d:+v,int=(v,d)=>v==null||v===''||isNaN(parseInt(v))?d:parseInt(v),gid=()=>Math.random().toString(36).slice(2,9),esc=s=>String(s).replace(/[&<>"'`]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;","`":"&#96;"}[c]))
const setImg=(img,src)=>{if(!img)return;img.onerror=null;img.src=src||DEFAULT_NEW_AVATAR;img.onerror=()=>{img.onerror=null;img.src=DEFAULT_NEW_AVATAR}}
const globalStore={get apiKey(){return localStorage.getItem('openrouter_api_key')||DEFAULT_API_KEY||''},set apiKey(v){localStorage.setItem('openrouter_api_key',v||'')}}
const as={key:'assistants_v1',activeKey:'active_assistant_id',load(){try{return JSON.parse(localStorage.getItem(this.key)||'[]')}catch{return[]}},save(list){localStorage.setItem(this.key,JSON.stringify(list||[]))},getActiveId(){return localStorage.getItem(this.activeKey)||null},setActiveId(id){localStorage.setItem(this.activeKey,id||'')}}
let assistants=as.load()
@@ -126,12 +127,12 @@ const getActive=()=>assistants.find(a=>a.id===as.getActiveId())||assistants[0],c
const store=new Proxy({},{get(_,p){if(p==='apiKey')return globalStore.apiKey;const a=getActive();if(p==='model')return a.settings.model;if(p in a.settings)return a.settings[p];if(p==='system_prompt')return a.settings.system_prompt},set(_,p,v){if(p==='apiKey'){globalStore.apiKey=v;return true}const i=assistants.findIndex(a=>a.id===getActive().id);if(i>=0){if(p==='model')assistants[i].settings.model=v||DEFAULT_MODEL;else if(p==='system_prompt')assistants[i].settings.system_prompt=v||'';else assistants[i].settings[p]=v;as.save(assistants);return true}return false}})
const state={messages:[],busy:false,controller:null,currentThreadId:null,abortRequested:false}
const getModelShort=()=>{const m=store.model||'';return m.includes('/')?m.split('/').pop():m}
function reflectActiveAssistant(){const a=getActive();el.settingsBtnTop.title=`Sune settings — ${a.name}`;if(window.lucide)lucide.createIcons()}
function renderSidebar(){const activeId=as.getActiveId();el.assistantList.innerHTML=assistants.map(a=>`<button data-asst-id="${a.id}" class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2 ${a.id===activeId?'bg-gray-100':''}"><span class="h-6 w-6 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">${(a.settings.avatar_url||DEFAULT_AVATAR)?`<img src="${esc(a.settings.avatar_url||DEFAULT_AVATAR)}" class="h-6 w-6 object-cover rounded-full"/>`:'🤖'}</span><span class="truncate">${esc(a.name)}</span></button>`).join('')}
function reflectActiveAssistant(){const a=getActive();el.settingsBtnTop.title=`Sune settings — ${a.name}`;setImg(el.activeAvatar,(a.settings.avatar_url||DEFAULT_AVATAR));if(window.lucide)lucide.createIcons()}
function renderSidebar(){const activeId=as.getActiveId();el.assistantList.innerHTML=assistants.map(a=>`<button data-asst-id="${a.id}" class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2 ${a.id===activeId?'bg-gray-100':''}"><span class="h-6 w-6 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">${(a.settings.avatar_url||DEFAULT_AVATAR)?`<img src="${esc(a.settings.avatar_url||DEFAULT_AVATAR)}" class="h-6 w-6 object-cover rounded-full" onerror="this.onerror=null;this.src='${DEFAULT_NEW_AVATAR}'"/>`:'🤖'}</span><span class="truncate">${esc(a.name)}</span></button>`).join('')}
function enhanceCodeBlocks(root,doHL=true){root.querySelectorAll('pre>code').forEach(code=>{if(code.textContent.length>200000)return;const pre=code.parentElement;pre.classList.add('relative','rounded-xl','border','border-gray-200');if(!pre.querySelector('.copy-btn')){const btn=document.createElement('button');btn.className='copy-btn';btn.textContent='Copy';btn.addEventListener('click',async e=>{e.stopPropagation();try{await navigator.clipboard.writeText(code.innerText);btn.textContent='Copied';setTimeout(()=>btn.textContent='Copy',1200)}catch{}});pre.appendChild(btn)}if(doHL&&window.hljs&&code.textContent.length<100000)hljs.highlightElement(code)})}
const md=window.markdownit({html:false,linkify:true,typographer:true,breaks:true})
function renderMarkdown(node,text,opt={enhance:true,highlight:true}){node.innerHTML=md.render(text);if(opt.enhance)enhanceCodeBlocks(node,opt.highlight)}
function msgRow(role){const row=document.createElement('div');row.className='flex flex-col gap-2';const head=document.createElement('div');head.className='flex items-center gap-2 px-4';const avatar=document.createElement('div');avatar.className=(role==='user'?'bg-gray-900 text-white':'bg-gray-200 text-gray-900')+' msg-avatar shrink-0 h-7 w-7 rounded-full flex items-center justify-center overflow-hidden';if(role==='user'){avatar.textContent='🧑'}else{const img=document.createElement('img');img.src=getActive().settings.avatar_url||DEFAULT_AVATAR;img.alt='sune';img.className='h-7 w-7 object-cover';avatar.textContent='';avatar.appendChild(img)}const name=document.createElement('div');name.className='text-xs font-medium text-gray-500';name.textContent=role==='user'?'You':getActive().name;head.appendChild(avatar);head.appendChild(name);const bubble=document.createElement('div');bubble.className=(role==='user'?'bg-gray-50 border border-gray-200':'bg-gray-100')+' msg-bubble markdown-body rounded-none px-4 py-3 w-full';row.appendChild(head);row.appendChild(bubble);el.messages.appendChild(row);queueMicrotask(()=>el.chat.scrollTo({top:el.chat.scrollHeight,behavior:'smooth'}));return bubble}
function msgRow(role){const row=document.createElement('div');row.className='flex flex-col gap-2';const head=document.createElement('div');head.className='flex items-center gap-2 px-4';const avatar=document.createElement('div');avatar.className=(role==='user'?'bg-gray-900 text-white':'bg-gray-200 text-gray-900')+' msg-avatar shrink-0 h-7 w-7 rounded-full flex items-center justify-center overflow-hidden';if(role==='user'){avatar.textContent='🧑'}else{const img=document.createElement('img');setImg(img,(getActive().settings.avatar_url||DEFAULT_AVATAR));img.alt='sune';img.className='h-7 w-7 object-cover';avatar.textContent='';avatar.appendChild(img)}const name=document.createElement('div');name.className='text-xs font-medium text-gray-500';name.textContent=role==='user'?'You':`${getActive().name} — ${getModelShort()}`;head.appendChild(avatar);head.appendChild(name);const bubble=document.createElement('div');bubble.className=(role==='user'?'bg-gray-50 border border-gray-200':'bg-gray-100')+' msg-bubble markdown-body rounded-none px-4 py-3 w-full';row.appendChild(head);row.appendChild(bubble);el.messages.appendChild(row);queueMicrotask(()=>el.chat.scrollTo({top:el.chat.scrollHeight,behavior:'smooth'}));return bubble}
function addMessage(role,content,track=true){const bubble=msgRow(role);renderMarkdown(bubble,content);if(track)state.messages.push({role,content});return bubble}
function addAssistantBubbleStreaming(){return msgRow('assistant')}
function clearChat(){state.messages=[];el.messages.innerHTML=''}
@@ -166,7 +167,7 @@ el.composer.addEventListener('submit',async e=>{e.preventDefault();if(state.busy
el.messages.addEventListener('click',e=>{if(e.target.closest('.msg-avatar'))openSidebar()})
el.input.addEventListener('input',fitRAF)
el.input.addEventListener('paste',()=>setTimeout(fit,0))
function normalizeGH(u){return/^https?:\/\/github\.com\//i.test(u)?u.replace(/https?:\/\/github\.com\/([^/]+)\/([^/]+)\/blob\/(.+)/i,'https://raw.githubusercontent.com/$1/$2/$3'):u}
function normalizeGH(u){return/^https?:\/\/github\.com\//i.test(u)?u.replace(/https?:\\/\\/github\.com\\/([^/]+)\\/([^/]+)\\/blob\\/(.+)/i,'https://raw.githubusercontent.com/$1/$2/$3'):u}
async function fetchSystemPrompt(u){try{const url=normalizeGH(u);const r=await fetch(url,{cache:'no-store'});if(!r.ok)throw new Error('HTTP '+r.status);const t=(await r.text()).trim();el.set_system_prompt.value=t;const a=getActive();a.settings.system_prompt=t;as.save(assistants)}catch{alert('Failed to fetch system prompt')}}
function updateSPBoxState(){const has=!!el.set_system_prompt_url.value.trim();el.set_system_prompt.readOnly=has;el.set_system_prompt.classList.toggle('bg-gray-50',has);el.set_system_prompt.classList.toggle('opacity-70',has)}
function openSettings(){const a=getActive(),s=a.settings;el.set_model.value=s.model;el.set_temperature.value=s.temperature;el.set_top_p.value=s.top_p;el.set_top_k.value=s.top_k;el.set_frequency_penalty.value=s.frequency_penalty;el.set_presence_penalty.value=s.presence_penalty;el.set_repetition_penalty.value=s.repetition_penalty;el.set_min_p.value=s.min_p;el.set_top_a.value=s.top_a;el.set_system_prompt.value=s.system_prompt;el.set_system_prompt_url.value=s.system_prompt_url||'';el.set_avatar_url.value=s.avatar_url||'';updateSPBoxState();showModelTab();el.settingsModal.classList.remove('hidden')}
@@ -184,7 +185,7 @@ el.set_system_prompt_url.addEventListener('change',()=>{const u=el.set_system_pr
el.fetch_sp_btn.addEventListener('click',()=>{const u=el.set_system_prompt_url.value.trim();if(u){fetchSystemPrompt(u)}})
el.settingsForm.addEventListener('submit',e=>{e.preventDefault();const a=getActive(),s=a.settings;s.model=(el.set_model.value||DEFAULT_MODEL).trim();s.temperature=clamp(num(el.set_temperature.value,1.0),0,2);s.top_p=clamp(num(el.set_top_p.value,1.0),0,1);s.top_k=Math.max(0,int(el.set_top_k.value,0));s.frequency_penalty=clamp(num(el.set_frequency_penalty.value,0.0),-2,2);s.presence_penalty=clamp(num(el.set_presence_penalty.value,0.0),-2,2);s.repetition_penalty=clamp(num(el.set_repetition_penalty.value,1.0),0,2);s.min_p=clamp(num(el.set_min_p.value,0.0),0,1);s.top_a=clamp(num(el.set_top_a.value,0.0),0,1);s.system_prompt_url=(el.set_system_prompt_url.value||'').trim();s.avatar_url=(el.set_avatar_url.value||'').trim();s.system_prompt=el.set_system_prompt.value.trim();as.save(assistants);renderSidebar();closeSettings();reflectActiveAssistant()})
el.deleteAssistantBtn.addEventListener('click',()=>{const activeId=as.getActiveId(),active=getActive(),name=active?.name||'this sune';if(!confirm(`Delete "${name}"?`))return;assistants=assistants.filter(a=>a.id!==activeId);as.save(assistants);if(assistants.length===0){const def=createDefaultAssistant();assistants=[def];as.save(assistants);as.setActiveId(def.id)}else{as.setActiveId(assistants[0].id)}renderSidebar();reflectActiveAssistant();state.currentThreadId=null;clearChat();closeSettings()})
el.newAssistantBtn.addEventListener('click',()=>{const name=prompt('Name your sune:');if(!name)return;const id=gid();assistants.unshift({id,name:name.trim(),settings:{model:DEFAULT_MODEL,temperature:1,top_p:1,top_k:0,frequency_penalty:0,presence_penalty:0,repetition_penalty:1,min_p:0,top_a:0,system_prompt:DEFAULT_SYS_PROMPT,system_prompt_url:'',avatar_url:DEFAULT_NEW_AVATAR}});as.save(assistants);as.setActiveId(id);renderSidebar();reflectActiveAssistant();state.currentThreadId=null;clearChat();closeSidebar()})
el.newAssistantBtn.addEventListener('click',()=>{const name=prompt('Name your sune:');if(!name)return;const id=gid();assistants.unshift({id,name:name.trim(),settings:{model:'openai/gpt-5-chat',temperature:1,top_p:1,top_k:0,frequency_penalty:0,presence_penalty:0,repetition_penalty:1,min_p:0,top_a:0,system_prompt:'',system_prompt_url:'',avatar_url:DEFAULT_NEW_AVATAR}});as.save(assistants);as.setActiveId(id);renderSidebar();reflectActiveAssistant();state.currentThreadId=null;clearChat();closeSidebar()})
el.assistantList.addEventListener('click',e=>{const btn=e.target.closest('[data-asst-id]');if(!btn)return;const id=btn.getAttribute('data-asst-id');if(id){as.setActiveId(id);renderSidebar();reflectActiveAssistant();state.currentThreadId=null;clearChat();closeSidebar()}})
function toggleUserMenu(show){if(show===true)el.userMenu.classList.remove('hidden');else if(show===false)el.userMenu.classList.add('hidden');else el.userMenu.classList.toggle('hidden')}
el.userMenuBtn.addEventListener('click',e=>{e.stopPropagation();toggleUserMenu()})
@@ -205,4 +206,4 @@ window.addEventListener('resize',()=>hideHistoryMenu())
init()
</script>
</body>
</html>
</html>