README.md

Cipher AI Vault Frontend Canister

This canister is the frontend for the Cipher AI Vault demo.

Note: This demo is a proof of concept and not intended for production use. It was developed as part of a Developer Grant from the DFINITY Foundation.

Table of Contents

• Prerequisites
• Local Deployment
• Mainnet Deployment
• Configuration
• Features
  • Authentication
  • Asset Management
  • Stable Memory Data Storage
  • VectorDB + LLM Integration
  • Cycles Top-Up
• Creating Actors for Backend Interactions
• Roadmap

Prerequisites

WebGPU Support

For the best experience, use a WebGPU enabled browser. We recommend Chrome Canary.

Required Software

• Node.js: v20.11.1
• DFX: v0.21.0

This project leverages the Azle development kit from Demergent Labs. For setup assistance, refer to:

• DFX Setup
• Node.js Setup
• Azle Documentation

Required Wallets

You will need one of the following wallets:

• Plug Wallet
• Stoic Wallet
• NFID Wallet
• Internet Identity

Local Deployment

Using dfx

# Ensure you are in the frontend directory
npm install
dfx start --background --clean
dfx deploy
dfx stop

Using npm

# Ensure you are in the frontend directory
npm install
npm run dev

Mainnet Deployment

⚠️ WARNING: THIS PROJECT IS NOT BUILT FOR PRODUCTION USE

1. Update the canister_ids.json file with your target canister ID.
2. Run the following command:

dfx deploy --network ic

Configuration

Edit the config.js file to configure canister and user whitelists:

// Existing canister ID
export const canisterId: string = "canister-id";

// Add the wallet address for cycles top-up payments
export const walletAddress: string = "principal";

export const whitelist: string[] = [
    "canister-id",
    "canister-id",
];

Features

Authentication

We use the ic-auth package for user authentication, supporting Plug, Stoic, NFID, and Internet Identity wallets.

Key files:

• ICWalletList.tsx: Implements wallet selection and login.
• AuthActor.tsx: Manages backend actor creation.

Integration

• Authentication Functions: The ic-auth package facilitates the login process for various wallet providers. The integration is implemented in the ICWalletList.tsx component.
• Backend Actor Creation: Actor creation for interacting with backend canisters is managed through the AuthActor.tsx file. This provides a general abstraction for creating backend actors using HttpAgent and Actor from @dfinity/agent.

For detailed usage, see the ic-auth README.

Asset Management

The useAssetManager.js hook is the core utility for managing assets on the Internet Computer.

Features:

• Load and display assets with support for various file types and use cases.
• Upload new assets and delete existing ones.
• Dynamically manage loading states and handle error messages.

Stable Memory Data Storage

The Stable Memory Data Storage feature allows users to store and retrieve data in a persistent and secure manner.

Implemented in:

• dataManager.ts hook
• PrivateDataStore.tsx screen
• data-store-canister repository

VectorDB + LLM Integration

Key Files

• LLM Integration: llm.js
• VectorDB Integration: DatabaseAdmin.tsx

Standalone Demos

• WebGPU LLM demo

Related Repositories

• WebGPU LLM
• VectorDB
• LLM with VectorDB

Packages Used

• @huggingface/transformers
• Custom fork of client-vector-search

Models Used

• Embeddings: all-MiniLM-L6-v2
• LLM: Phi-3-mini-4k-instruct-fp16

Custom Data Integration

To initialize custom data into the VectorDB, upload a JSON file to the Data Store and select it in the Database Admin Panel. The JSON structure should be:

[
  {
    "id": 1,
    "name": "name here",
    "description": "description here"
  },
  {
    "id": 2,
    "name": "name here",
    "description": "description here"
  }
]

Cycles Top-Up

The Cycles Top-Up feature streamlines the conversion of ICP into cycles, enabling effortless top-ups for canisters used within the demo.

Implemented in useCyclesTopup.js hook.

Related projects:

• Demo's Cycles Distro canister
• Stand-alone Cycles Distro module

Creating Actors for Backend Interactions

To interact with canisters on the Internet Computer, actors need to be created with specific roles:

• Cycles Actor: Manages cycle-related operations, ensuring efficient resource management.
• Ledger Actor: Handles ledger transactions and queries, facilitating secure and transparent financial operations.
• Distribution Actor: Distributes cycles across canisters, supporting balanced and scalable resource allocation.
• Data Actor: Manages data storage and retrieval, ensuring data integrity and accessibility.

Roadmap

• Upload .txt and .pdf files and use LLM to generate data for VectorDB
• Clean up unused or duplicate style entries in index.css
• Create CSS files for different components
• Implement choice of various LLMs for the chatbot