add keyword group

Assets/Qdrant/storage/collections/data-v1/0/newest_clocks.json

@@ -1 +1 @@
-{"clocks":[{"peer_id":2200039024721645,"clock_id":2,"current_tick":13,"token":18171945371147883509},{"peer_id":2200039024721645,"clock_id":0,"current_tick":31,"token":14274923382223712766},{"peer_id":2200039024721645,"clock_id":1,"current_tick":19,"token":13530503213804333634},{"peer_id":2200039024721645,"clock_id":6,"current_tick":1,"token":9225203475475803001},{"peer_id":2200039024721645,"clock_id":3,"current_tick":5,"token":12159487072447257415},{"peer_id":2200039024721645,"clock_id":4,"current_tick":3,"token":3225682797052271524},{"peer_id":2200039024721645,"clock_id":5,"current_tick":3,"token":16737324663161229622}]}
+{"clocks":[{"peer_id":2200039024721645,"clock_id":5,"current_tick":3,"token":16737324663161229622},{"peer_id":2200039024721645,"clock_id":1,"current_tick":19,"token":13530503213804333634},{"peer_id":2200039024721645,"clock_id":3,"current_tick":5,"token":12159487072447257415},{"peer_id":2200039024721645,"clock_id":2,"current_tick":13,"token":18171945371147883509},{"peer_id":2200039024721645,"clock_id":0,"current_tick":31,"token":14274923382223712766},{"peer_id":2200039024721645,"clock_id":6,"current_tick":1,"token":9225203475475803001},{"peer_id":2200039024721645,"clock_id":4,"current_tick":3,"token":3225682797052271524}]}

v2/app/src/App.css

@@ -16,3 +16,6 @@ form{
 
   /* @apply text-sm opacity-50; */
 }
+.keyword > span {
+  @apply bg-gray-200 text-black rounded-full p-2;
+}

v2/app/src/App.jsx

@@ -154,6 +154,7 @@ function App() {
           <div className="col-span-2">Content</div>
           <div className="bg-pink-200 text-xs self-center">Summary</div>
           <div className="flex flex-row gap-2 flex-wrap items-center text-xs">Keywords</div>
+          <div className="text-xs">Distance to Keywords</div>
          </div>
           {results?.length>0 && results.map((item, index)=>{
               let output={};
@@ -161,9 +162,18 @@ function App() {
               return (
                 <div key={index} className="border-b p-2 my-2 grid grid-cols-6 gap-2">                
                   <div>#{index+1}</div>
-                  <p>score={item.score.toFixed(4)}</p>
+                  <p>score={item.score?.toFixed(4)}</p>
                   
                   {(()=>{
+                    if(item.type==='keyword'){
+                      const payload=JSON.parse(item.payload.text);
+                      return (<>
+                        <div colSpan={2} className="col-span-2 font-bold">{payload?.title}</div>
+                        <div className="col-span-3">--</div>
+                        <div className="bg-pink-200 text-xs self-center">--</div>                    
+                        <div className="flex flex-row gap-2 flex-wrap items-center text-xs">--</div>
+                      </>);
+                    }
                     let p={
                       ...item.payload,
                       metadata: JSON.parse(item.payload.metadata),                      
@@ -174,6 +184,9 @@ function App() {
                       <div className="col-span-2">{p.metadata.text}</div>
                       <div className="bg-pink-200 text-xs self-center">{p.summry}</div>                    
                       <div className="flex flex-row gap-2 flex-wrap items-center text-xs">{p.keywords.map(el=><span className="bg-gray-200 rounded-full px-2" key={el}>{el}</span>)}</div>
+                      <div className="text-xs">{p.group.map(el=>(<>
+                          <span>{el.title}({el.distance.toFixed(2)}) </span>
+                        </>))}</div>
                     </>);
                   })()}
                 </div>

v2/app/src/components/graph.jsx

@@ -90,8 +90,11 @@ export default function Graph({results}){
             <Bounds fit clip observe margin={1.2}>
                 <group>
                 {Array.isArray(points) && points?.map((point, index)=>(
-                    <Point key={index} point={point} index={index} totalPoints={points.length} result={results?.[index]} 
+                    <Point key={index} point={point} index={index} totalPoints={points.length} 
-                        showContent={showContent} showKeyword={showKeywords} contentType={contentType} textToShow={textToShow} />
+                        result={results?.[index]} 
+                        showContent={showContent} showKeyword={showKeywords} contentType={contentType} 
+                        textToShow={textToShow}
+                        />
                 ))}
                 </group>                    
 

v2/app/src/components/point.jsx

@@ -59,16 +59,21 @@ export default function Point({point, index, totalPoints, result, showContent, s
 
     function getContent(){
         if(!payload) return '';
+        // console.log("Point contentType:", contentType, payload);
+        // if(payload.normalized_time===-1){
+        //     return <span>{payload.text}</span>
+        // }
 
         switch(contentType){
             case PointContentType.Full:
                 return payload.content.slice(0, textToShow) + (payload.content.length > textToShow ? '...' : '');
             case PointContentType.Teaser:
-                return payload.teaser;
+                return `<span>${payload.teaser}</span>`;
             case PointContentType.Blur:
             case PointContentType.Symbol:
                 const start=payload.content.indexOf(payload.teaser);
-                if(start===-1) return payload.teaser;
+                if(start===-1) 
+                    return `<span>${payload.teaser}</span>`;
 
                 const before=payload.content.substring(0, start);
                 const after=payload.content.substring(start + payload.teaser.length);   
@@ -82,6 +87,7 @@ export default function Point({point, index, totalPoints, result, showContent, s
     useFrame((state) => {
         if (!meshRef.current || !refText.current || !payload) return;
          
+
         const time = state.clock.elapsedTime;
         const lifeTimeOffset = (payload.number / payload.total) || 0;
 
@@ -106,15 +112,23 @@ export default function Point({point, index, totalPoints, result, showContent, s
 
         // 更新 HTML 樣式
         if (refText.current) {
-            refText.current.style.opacity *= alpha;
+
+                           
             // 結合深度縮放與物體本身的脈衝狀態
             const finalHtmlScale = depthScaleFactor * (currentMeshScale / PointSize);
             refText.current.style.transform = `translate(-50%, -50%) scale(${finalHtmlScale})`;
             
-            // 加入 CSS 濾鏡：越遠越模糊
+            if(payload.normalized_time===-1){
-            const blurAmount = distance > DEPTH_CONFIG.FADE_START ? (distance - DEPTH_CONFIG.FADE_START) / 20 : 0;
+            // meshRef.current.scale.set(PointSize, PointSize, PointSize);
-            refText.current.style.filter = `blur(${Math.min(blurAmount, 4)}px)`;
+                refText.current.style.opacity = 1;
+                refText.current.style.transform = `translate(-50%, -50%) scale(1)`;
              
+            }else{    
+                 refText.current.style.opacity *= alpha;
+                // 加入 CSS 濾鏡：越遠越模糊
+                const blurAmount = distance > DEPTH_CONFIG.FADE_START ? (distance - DEPTH_CONFIG.FADE_START) / 20 : 0;
+                refText.current.style.filter = `blur(${Math.min(blurAmount, 4)}px)`;
+            }
             // 效能優化
             // refText.current.style.display = alpha <= 0.01 ? 'none' : 'block';
         }
@@ -130,8 +144,11 @@ export default function Point({point, index, totalPoints, result, showContent, s
         // return;
 
         if(!payload) return;
-        const lifeTime=payload.normalized_time || 0;
+        
-        console.log("Point lifeTime:", lifeTime);
+        const lifeTime=payload.normalized_time;
+        if(lifeTime===-1) return; // keyword 不參與動畫
+
+        // console.log("Point lifeTime:", lifeTime);
 
         // animate point size based on lifeTime
         const targetSize=1;
@@ -210,17 +227,36 @@ export default function Point({point, index, totalPoints, result, showContent, s
 
     useEffect(()=>{
         
+        if(!result) return;
+
+        console.log("Point result:", result);
+        if(result?.type==='keyword'){
+            const title=JSON.parse(result.payload.text??'{}').title;
+            const payloadKeyword={
+                ...JSON.parse(result.payload.text??'{}'),
+                keywords: [title],
+                number: 0,
+                total: 1,
+                content: title || '',
+                teaser: title ||'',
+                normalized_time: -1,
+                type: result.type || 'keyword',
+            };
+            setPayload(payloadKeyword);
+            return;
+        }
         setPayload({
-            ...JSON.parse(result.payload.metadata),
+            ...JSON.parse(result.payload.metadata??'{}'),
-            keywords: result.payload.keywords || '[]',
+            keywords: result.payload.keywords || [],
-            number: result.payload.number || '0',
+            number: result.payload.number || 0,
-            total: result.payload.total || '1',
+            total: result.payload.total || 1,
-            content: JSON.parse(result.payload.metadata).text || '',
+            content: JSON.parse(result.payload.metadata??'{}').text || '',
             teaser: result.payload.teaser || '',
             normalized_time: result.payload.normalized_time || 0,
+            type: result.type || 'data',
         });
 
-    },[point]);
+    },[result]);
 
 
     return (
@@ -233,11 +269,11 @@ export default function Point({point, index, totalPoints, result, showContent, s
             />
             <Html>
                 <div ref={refText} className='text-white p-2 select-none text-center opacity-0'>
-                    {<div className={`flex flex-row justify-center flex-wrap text-[1rem] ${showKeyword ? 'block' : 'hidden'}`}>
+                    {payload?.keywords && <div className={`flex flex-row justify-center flex-wrap text-[1rem] ${showKeyword ? 'block' : 'hidden'}`}>
                         {payload?.keywords.map((el, index)=><span key={index} className='px-2' style={{transform: `translate(${Math.random() * KeywordOffset}px,${Math.random() * KeywordOffset}px)`}}>{el}</span>)}
                     </div>}
                     {<div 
-                        className={`text-[2rem] text-white rounded p-2 text-center w-[50vw] splittext ${showContent ? 'block' : 'hidden'}`}
+                        className={`text-[2rem] text-white rounded p-2 text-center max-w-[50vw] min-w-[20vw] splittext ${showContent ? 'block' : 'hidden'} ${payload?.type??''}`}
                         // style={{width: `${Math.random()*(payload?.content.length/5 || 10) + 20}vw`}}
                         dangerouslySetInnerHTML={{__html: getContent()}}
                     ></div>}

v2/app/src/utils/group.js

@@ -0,0 +1,17 @@
+export function distanceToKeywords(vector, keywordsEmbeddings) {
+    const distances = keywordsEmbeddings.map(keyword => {
+        return {
+            title: keyword.title,
+            id: keyword.id,
+            distance: euclideanDistance(vector, keyword.embedding)
+        };
+    });
+    distances.sort((a, b) => a.distance - b.distance);
+    return distances;
+}
+function euclideanDistance(vec1, vec2) {
+    if (vec1.length !== vec2.length) {
+        throw new Error("Vectors must be of same length");
+    }
+    return Math.sqrt(vec1.reduce((sum, val, i) => sum + Math.pow(val - vec2[i], 2), 0));
+}

v2/app/src/utils/parsing.js

@@ -1,4 +1,5 @@
 import { fetch } from '@tauri-apps/plugin-http';
+import { distanceToKeywords } from './group.js';
 
 const COLLECTION_DATA = 'data-v4';
 const COLLECTION_THEME = 'theme-v1';
@@ -139,6 +140,7 @@ export async function searchByTheme(themeId, limit){
 export async function searchByKeywords(keywordIds, limit){
     // get keyword embeddings from Qdrant
     let allResults = [];
+    let keywords=[];
     for(const keywordId of keywordIds){
         const res=await fetch(`http://localhost:6333/collections/${COLLECTION_KEYWORD}/points/${parseInt(keywordId)-1}`, {
             method: 'GET',
@@ -153,14 +155,36 @@ export async function searchByKeywords(keywordIds, limit){
         }
 
         const data = await res.json();
+        console.log(data);
 
         const results = await searchQdrant(data.result.vector, Math.floor(limit/keywordIds.length));
 
         allResults.push(...results);
+
+        const keypoint={
+            type: 'keyword',
+            id: keywordId,
+            payload: data.result.payload,
+            vector: data.result.vector
+        };
+        keywords.push(keypoint);
+        allResults.push(keypoint);
     }
 
+
     normalizeResultTime(allResults);
 
+    // calculate distance to each keyword    
+    allResults.forEach(item=>{
+        if(item.type==='keyword') return;   
+        item.payload.group = distanceToKeywords(item.vector, keywords.map(kw=>({
+            title: JSON.parse(kw.payload.text).title,
+            embedding: kw.vector,
+            id: kw.id
+        })));
+    });
+    
+
     return allResults;
 }
 
@@ -193,8 +217,11 @@ async function searchQdrant(query_embeddings, limit=10){
 
 function normalizeResultTime(results){
 
+    
     let min, max;
     results.forEach(item=>{
+        if(item.type==='keyword') return;
+
         const time = JSON.parse(item.payload.metadata).published_on;
         if(!min || time<min) min=time;
         if(!max || time>max) max=time;
@@ -204,12 +231,19 @@ function normalizeResultTime(results){
 
     // results sort by time
     results.sort((a, b) => {
+        if(a.type==='keyword') return -1;
+        if(b.type==='keyword') return 1;
+
         const timeA = JSON.parse(a.payload.metadata).published_on;
         const timeB = JSON.parse(b.payload.metadata).published_on;
         return timeA - timeB;
     });
 
     results.forEach((item, index)=>{
+        if(item.type==='keyword') {
+            item.payload.normalized_time = -1;
+            return;
+        }
         const time = JSON.parse(item.payload.metadata).published_on;
         item.payload.normalized_time = index;//Math.floor((time - min) / (max - min)*results.length);
     });