81 |
124 | ) : markdown && markdown.length > 0 ? (
125 |
82 |
97 | {markdownCompare && markdownCompare.length > 0 ? (
98 | 83 | Generation using all retrieved documents 84 |
85 | {markdown.map((str, index) => ( 86 |
99 |
114 | ) : (
115 | 100 | Generation on selected documents and tokens 101 |
102 | {markdownCompare.map((str, index) => ( 103 |
116 |
122 | )}
123 |
126 |
139 | ) : (
140 | Generation on all retrieved documents
127 | {markdown.map((str, index) => ( 128 |
141 |
147 | )
148 | }
149 | >
6 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/frontend/src/app/components/logo.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 |
3 | export const Logo: FC = () => {
4 | return (
5 |
7 | Answer generated by large language models, plz double check for
8 | correctness. UI adapted from Lepton.
9 |
10 |
6 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/frontend/src/app/components/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "@/app/utils/cn";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef
7 | 
8 |
9 |
8 |
10 | RAGViz
11 |
12 |
13 | alpha
14 |
15 |
18 | {relates !== null ? (
19 | relates.length > 0 ? (
20 | relates.map(({ question }) => (
21 |
34 | }
35 | >No related questions.
25 | )
26 | ) : (
27 | <>
28 |
73 |
123 | );
124 | };
125 |
--------------------------------------------------------------------------------
/frontend/src/app/components/search.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { getSearchUrl } from "@/app/utils/get-search-url";
3 | import { ArrowRight } from "lucide-react";
4 | import { nanoid } from "nanoid";
5 | import { useRouter } from "next/navigation";
6 | import React, { FC, useState } from "react";
7 |
8 | export const Search: FC<{
9 | defK: string;
10 | apiKey: string;
11 | defSnippet: string;
12 | }> = ({ defK, apiKey, defSnippet }) => {
13 | const [value, setValue] = useState("");
14 | const [k, setK] = useState(defK);
15 | const [snippet, setSnippet] = useState(defSnippet);
16 | const router = useRouter();
17 | return (
18 |
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/frontend/src/app/components/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/app/utils/cn";
2 | import { HTMLAttributes } from "react";
3 |
4 | function Skeleton({ className, ...props }: HTMLAttributes
87 |
94 | )}
95 | {modal && (
96 |
88 |
93 |
97 |
121 | )}
122 |
98 |
120 | 99 | 1. Hover over tokens in the Answer section to see the attention 100 | visualization for that generated token. If you want to lock that 101 | visualization or visualize multiple tokens, simply drag. 102 |
103 | 104 |105 | 2. Remove documents by clicking the buttons, and remove tokens by 106 | dragging. 107 |
108 | 109 |110 | 3. Press "Save and Rewrite" to see the new generation. 111 |
112 | 113 | setModal(false)}
116 | >
117 | Close Instructions
118 |
119 |
73 |
173 | );
174 | };
175 |
176 | function deepCopyArray(arr: any): any {
177 | if (!Array.isArray(arr)) {
178 | return arr; // If it's not an array, return the value
179 | }
180 |
181 | return arr.map((element) => deepCopyArray(element)); // Recursively copy each element
182 | }
183 |
184 | export const Sources: FC<{
185 | sources: Source[];
186 | token: number[] | null;
187 | rewrite: (keep: boolean[][][]) => void;
188 | }> = ({ sources, token, rewrite }) => {
189 | const [keep, setKeep]: [
190 | boolean[][][],
191 | Dispatch
74 |
105 | Attention score:
75 |76 | {token == null || 77 | !token.map((t) => attn[t]) || 78 | token.length <= 0 || 79 | attn[token[0]] == null 80 | ? "None" 81 | : ( 82 | Math.round( 83 | token 84 | .map((t) => attn[t].score) 85 | .reduce((acc, curr) => acc + curr) * 1000, 86 | ) / 87 | (1000 * token.length) 88 | ).toFixed(3)} 89 |
90 |
91 |
104 |
95 | Add All Tokens
96 |
97 |
101 | Remove All Tokens
102 |
103 |
108 | {/* */}
109 |
172 |
110 | {nameTokens.map((str, tokenIndex) => (
111 | attn[t]) &&
120 | token.length > 0 &&
121 | attn[token[0]] != null
122 | ? token
123 | .map((t) => attn[t].name[tokenIndex] * 1000)
124 | .reduce((acc, curr) => acc + curr) / token.length
125 | : null,
126 | )} ${keep[index] && keep[index][0][tokenIndex] ? "opacity-100" : "opacity-50"} cursor-pointer`}
127 | >
128 | {str}
129 |
130 | ))}
131 |
132 |
133 |
134 | {snippetTokens.map((str, tokenIndex) => (
135 | attn[t]) &&
144 | token.length > 0 &&
145 | attn[token[0]] != null
146 | ? token
147 | .map((t) => attn[t].snippet[tokenIndex] * 1000)
148 | .reduce((acc, curr) => acc + curr) / token.length
149 | : null,
150 | )} ${keep[index] && keep[index][1][tokenIndex] ? "opacity-100" : "opacity-50"} cursor-pointer`}
151 | >
152 | {str}
153 |
154 | ))}
155 |
156 |
157 | {/*
158 |
*/}
171 |
159 |
163 |
160 | {index + 1} - {domain}
161 |
162 |
164 | 
169 |
170 |
228 |
246 |
247 | }
248 | content={
249 |
235 | Save and Rewrite
236 |
237 |
241 | Cancel
242 |
243 |
244 | )}
245 |
250 | {sources.length > 0 ? (
251 | sources.map((item, index) => (
252 |
270 | }
271 | >
27 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/frontend/src/app/components/wrapper.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from "react";
2 |
3 | export const Wrapper: FC<{
4 | title: ReactNode;
5 | content: ReactNode;
6 | }> = ({ title, content }) => {
7 | return (
8 |
31 | {query}
32 |
33 |
40 |
41 |
58 |
59 |
9 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/frontend/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | input:-webkit-autofill,
6 | input:-webkit-autofill:hover,
7 | input:-webkit-autofill:focus,
8 | textarea:-webkit-autofill,
9 | textarea:-webkit-autofill:hover,
10 | textarea:-webkit-autofill:focus,
11 | select:-webkit-autofill,
12 | select:-webkit-autofill:hover,
13 | select:-webkit-autofill:focus {
14 | -webkit-background-clip: text;
15 | }
16 |
--------------------------------------------------------------------------------
/frontend/src/app/interfaces/relate.ts:
--------------------------------------------------------------------------------
1 | export interface Relate {
2 | question: string;
3 | }
4 |
--------------------------------------------------------------------------------
/frontend/src/app/interfaces/source.ts:
--------------------------------------------------------------------------------
1 | export interface Source {
2 | id: string;
3 | name: string;
4 | url: string;
5 | isFamilyFriendly: boolean;
6 | displayUrl: string;
7 | snippet: string;
8 | deepLinks: { snippet: string; name: string; url: string }[];
9 | dateLastCrawled: string;
10 | cachedPageUrl: string;
11 | language: string;
12 | primaryImageOfPage?: {
13 | thumbnailUrl: string;
14 | width: number;
15 | height: number;
16 | imageId: string;
17 | };
18 | attn: {
19 | name: number[];
20 | snippet: number[];
21 | score: number;
22 | }[];
23 | isNavigational: boolean;
24 | nameTokens: string[];
25 | snippetTokens: string[];
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import "./globals.css";
4 | import { ReactNode } from "react";
5 |
6 | const inter = Inter({ subsets: ["latin"] });
7 |
8 | export const metadata: Metadata = {
9 | title: "RAGViz",
10 | description:
11 | "Answer generated by large language models (LLMs). Double check for correctness.",
12 | };
13 |
14 | export default function RootLayout({ children }: { children: ReactNode }) {
15 | return (
16 |
17 |
18 | {/* Adding the favicon */}
19 | {title}
10 | {content}
11 |
12 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/frontend/src/app/search/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Result } from "@/app/components/result";
3 | import { Search } from "@/app/components/search";
4 | import { Title } from "@/app/components/title";
5 | import { useSearchParams } from "next/navigation";
6 | import { useState } from "react";
7 |
8 | export default function SearchPage() {
9 | const searchParams = useSearchParams();
10 | const query = decodeURIComponent(searchParams.get("q") || "");
11 | const rid = decodeURIComponent(searchParams.get("rid") || "");
12 | const k = decodeURIComponent(searchParams.get("k") || "5");
13 | const apiKey = decodeURIComponent(searchParams.get("api_key") || "");
14 | const snippet = decodeURIComponent(searchParams.get("snippet") || "first");
15 | const [modal, setModal] = useState(false);
16 | return (
17 |
13 |
32 |
18 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/frontend/src/app/utils/cn.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/src/app/utils/fetch-stream.ts:
--------------------------------------------------------------------------------
1 | async function pump(
2 | reader: ReadableStreamDefaultReader
19 |
20 |
46 |
21 |
39 |
40 |
41 |
45 |
42 |
44 |