Hello! :) thanks for checking the code of my personal developer portfolio.

The goal for this project is just to create an efficient, clean, optimized, unique, deveoper portfolio that showcases my passion for computers and science!

I will be using modern industry standard technology as well as new emerging technology.

I am using libraries in this portfolio if you'd like to see more of my raw javascript work please check out:

I also am utilizing a personal public serverless API I have built previously.

• Developer environment
  • VScode(open source*)
• Build tooling
  • Vite (open source)
    • During development, Vite provides a fast development server with hot module replacement (HMR). This allows you to see changes in real-time without a full page reload.
    • Cloudflare Pages will then build your project using Vite and deploy the contents of the dist directory to their CDN, making your site available on the web.
  • Rollup (open source)
    • In your project, Rollup is used under the hood by Vite to bundle your code for production. Vite leverages Rollup's powerful plugin system to optimize and transform your code.
  • Node (open source)
    • Node.js is used to run the build tools and scripts. For example, when you run vite build, Node.js executes the Vite build process, which uses Rollup under the hood to bundle your code for production.
  • Esbuild (open source)
    • Esbuild is an extremely fast JavaScript bundler and minifier. In the context of your project, esbuild is used by Vite to speed up the development and build processes.
  • Typescript(open source)
    • Vite uses the TypeScript compiler to transpile TypeScript code to JavaScript. The output JavaScript code is then served by Vite during development or bundled for production.
• Browser engines and tooling -EC14(open source) -Edge/Firefox/Opera(open source) - This means that Edge shares the same rendering engine (Blink) and JavaScript engine (V8) as Chrome, providing similar performance and compatibility with web standards.
• Programming languages and frameworks
  • Web basic HTML,JS,JSX,CSS.
  • React.js(open source)
  • Saas/SCSS(open source)
• Testing and testing frameworks
  • Jest(open source)
    • Jest is a delightful JavaScript testing framework with a focus on simplicity. It works with projects using Babel, TypeScript, Node.js, React, Angular, Vue.js, and Svelte.
  • React Testing Library(open source)
    • React Testing Library is a lightweight solution for testing React components. It provides utility functions to interact with the components in a way similar to how a user would.
  • Cypress(open source)
    • Cypress is a fast, easy, and reliable testing framework for anything that runs in a browser. It is used for end-to-end testing.
  • Vitest(open source)
    • Vitest is a blazing fast unit test framework powered by Vite. It is designed to be a Vite-native test runner, providing a seamless testing experience with Vite projects.
  • ESLint(open source)
    • ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It helps in maintaining code quality and consistency.
  • Prettier(open source)
    • Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules.
• Animation
  • Three.js(open source)
    • Three.js is a powerful JavaScript library that simplifies the creation of 3D graphics in the browser. It provides a wide range of features for rendering complex 3D scenes, including support for WebGL, shaders, and various geometries and materials.
  • GSAP(open source)
    • GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It offers a simple API for animating DOM elements, SVGs, and other objects, making it easy to create smooth and complex animations.
  • Framer Motion(open source)
    • Framer Motion is a popular React animation library that provides a simple and declarative API for creating animations and gestures. It integrates seamlessly with React components, allowing you to create fluid and interactive animations with ease.
• 3RD party libraries and tools
  • Redux(open source)
    • Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Redux centralizes your application's state and logic, enabling powerful capabilities like undo/redo, state persistence, and more.

AI Retrieval-Augmented Generation (RAG) is a technique that combines information retrieval and natural language generation to provide more accurate and contextually relevant responses. In this approach, a retrieval model first searches a large corpus of documents to find relevant information based on a user's query. Then, a generation model uses the retrieved information to generate a coherent and informative response.

In my application, AI RAG is used to enhance the chatbot's ability to answer user queries based on the documents stored in the application. By leveraging RAG, the chatbot can:

1. Retrieve Relevant Information: The retrieval model searches through the stored documents to find the most relevant information related to the user's query.
2. Generate Accurate Responses: The generation model uses the retrieved information to generate a detailed and accurate response, ensuring that the answers are contextually appropriate and informative.

This approach improves the chatbot's performance by providing more precise and context-aware answers, making it a valuable tool for users seeking information from the stored documents.

Create a directory in your React app to store documents, e.g., src/documents.

Add your documents in JSON, Markdown (.md), or plain text format to the src/documents directory.

Install necessary packages for embedding models and local LLMs:

npm install @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder transformers.js local-llm

Create a utility function to load documents from the src/documents directory:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/utils/loadDocuments.js
import fs from 'fs';
import path from 'path';

export const loadDocuments = () => {
    const documentsDir = path.resolve(__dirname, '../documents');
    const files = fs.readdirSync(documentsDir);
    return files.map(file => fs.readFileSync(path.join(documentsDir, file), 'utf-8'));
};

Create a function to generate embeddings for the loaded documents using a JS-based embedding model:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/utils/generateEmbeddings.js
import * as use from '@tensorflow-models/universal-sentence-encoder';

export const generateEmbeddings = async (documents) => {
    const model = await use.load();
    const embeddings = await model.embed(documents);
    return embeddings.arraySync();
};

Store the generated embeddings in IndexedDB or LocalStorage:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/utils/storeEmbeddings.js
export const storeEmbeddings = (embeddings) => {
    localStorage.setItem('documentEmbeddings', JSON.stringify(embeddings));
};

Create a function to retrieve embeddings from storage:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/utils/retrieveEmbeddings.js
export const retrieveEmbeddings = () => {
    const embeddings = localStorage.getItem('documentEmbeddings');
    return embeddings ? JSON.parse(embeddings) : null;
};

Set up an open-source local LLM (e.g., WebLLM, llama.cpp, or Mistral) to run in-browser:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/utils/localLLM.js
import { LocalLLM } from 'local-llm';

export const runLocalLLM = async (query, context) => {
    const llm = new LocalLLM();
    const response = await llm.generate(query, context);
    return response;
};

Implement the chatbot component to handle user queries and return answers:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/components/Chatbot.js
import React, { useState, useEffect } from 'react';
import { loadDocuments } from '../utils/loadDocuments';
import { generateEmbeddings } from '../utils/generateEmbeddings';
import { storeEmbeddings, retrieveEmbeddings } from '../utils/storeEmbeddings';
import { runLocalLLM } from '../utils/localLLM';

const Chatbot = () => {
    const [query, setQuery] = useState('');
    const [response, setResponse] = useState('');

    useEffect(() => {
        const init = async () => {
            const documents = loadDocuments();
            const embeddings = await generateEmbeddings(documents);
            storeEmbeddings(embeddings);
        };
        init();
    }, []);

    const handleQuery = async () => {
        const embeddings = retrieveEmbeddings();
        const context = embeddings.map(embedding => embedding.text).join(' ');
        const answer = await runLocalLLM(query, context);
        setResponse(answer);
    };

    return (
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Ask a question..."
            />
            <button onClick={handleQuery}>Ask</button>
            <p>{response}</p>
        </div>
    );
};

export default Chatbot;

Integrate the chatbot component into your main application:

// filepath: /c:/SpecterClearLLC/gmdevportfolio/src/App.js
import React from 'react';
import Chatbot from './components/Chatbot';

function App() {
    return (
        <div>
            <h1>Welcome to My Portfolio</h1>
            <Chatbot />
        </div>
    );
}

export default App;

This guide provides a step-by-step approach to creating an AI chatbot that answers questions based on personal documents stored directly in your React app. The chatbot uses a JS-based embedding model to convert document text into embeddings and a local LLM to generate responses.

• TensorFlow: An open-source platform for machine learning.
• Hugging Face: A hub for natural language processing models and datasets.
• OpenAI: Research organization focused on developing and deploying AI.

• Vercel: A platform for frontend developers, providing hosting and serverless functions.
• Netlify: A platform for deploying and managing modern web projects.
• Cloudflare Pages: A JAMstack platform for frontend developers to collaborate and deploy websites.

• Universal Sentence Encoder: A model for encoding sentences into embedding vectors.
• Transformers.js: A JavaScript library for running transformer models in the browser.
• Local LLM: A library for running local language models in the browser.

• IndexedDB: A low-level API for storing large amounts of structured data.
• LocalStorage: A web storage API for storing data locally in the browser.

• Jupyter Notebooks: An open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
• Colab: A free Jupyter notebook environment that runs in the cloud, provided by Google Research.

These resources can help you in various stages of implementing AI RAG in your application, from research and development to deployment and hosting.

By using Hugging Face Transformers with WebAssembly and TensorFlow.js, you can run local language models directly in the browser. This approach leverages powerful AI models and ensures that your application remains responsive and efficient. The provided code snippets guide you through loading documents, generating embeddings, storing and retrieving embeddings, and implementing a chatbot component that uses these embeddings to answer user queries.

This guide provides a step-by-step approach to creating an AI chatbot that answers questions based on personal documents stored directly in your React app. The chatbot uses a JS-based embedding model to convert document text into embeddings and a local LLM to generate responses.