mirror of
https://github.com/vndangkhoa/Sys-Arc-Visl.git
synced 2026-04-05 01:17:57 +07:00
fix: build errors and update readme
This commit is contained in:
parent
9d8e81da0b
commit
ff6e1ebeda
2 changed files with 22 additions and 34 deletions
51
README.md
51
README.md
|
|
@ -7,12 +7,14 @@
|
|||
## ✨ Features
|
||||
|
||||
- **🤖 AI-Powered Generation** — Generates complex diagrams from text prompts using **Llama 3** (local browser) or Cloud AI.
|
||||
- **<EFBFBD>️ Vision-to-Diagram** — **Florence-2** powered analysis converts screenshots and sketches into editable layouts entirely in the browser.
|
||||
- **<EFBFBD>️ Unified Toolkit** — A clean, consolidated toolbar for critical actions (Zoom, Layout, Pan/Select) keeps the canvas "void-like".
|
||||
- **👁️ Vision-to-Diagram** — **Florence-2** powered analysis converts screenshots and sketches into editable layouts entirely in the browser.
|
||||
- **🖌️ Unified Toolkit** — A clean, consolidated toolbar for critical actions (Zoom, Layout, Pan/Select) keeps the canvas "void-like".
|
||||
- **🗺️ MiniMap Overlay** — Navigational aid for large diagrams, unobtrusively positioned in the bottom-right.
|
||||
- **💡 Smart Guidance** — Context-aware tips and rotation suggestions when looking at empty space.
|
||||
- **<EFBFBD> Theme-Aware Code Editor** — Monaco editor that automatically syncs with your Light/Dark aesthetic.
|
||||
- **📝 Theme-Aware Code Editor** — Monaco editor that automatically syncs with your Light/Dark aesthetic.
|
||||
- **🎨 "Void" Aesthetic** — Premium glassmorphism design with deep blur effects and cinematic transitions.
|
||||
- **⏪ Undo/Redo** — Full history support with time-travel capabilities for safe editing.
|
||||
- **📐 Optimized Layout** — Enhanced Dagre layout engine with smart spacing to prevent overlapping text.
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
|
|
@ -38,7 +40,7 @@ npm run dev
|
|||
|
||||
Open [http://localhost:5173](http://localhost:5173) in your browser.
|
||||
|
||||
## <EFBFBD> AI Configuration
|
||||
## 🧠 AI Configuration
|
||||
|
||||
KV-Graph supports a **Local-First** AI architecture, running powerful models directly in your browser via WebGPU.
|
||||
|
||||
|
|
@ -63,6 +65,16 @@ Connect to external providers for enhanced capabilities.
|
|||
|
||||
Configure your AI provider in **Settings** (⚙️ icon).
|
||||
|
||||
## 🐳 Docker Support
|
||||
|
||||
Run KV-Graph locally using Docker:
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
Open [http://localhost:8338](http://localhost:8338) in your browser.
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
|
|
@ -108,7 +120,7 @@ kv-graph/
|
|||
|--------|-------------|
|
||||
| **PNG** | High-resolution raster image (3x pixel ratio) |
|
||||
| **JPG** | Compressed image format |
|
||||
| **SVG** | Vector graphics (scalable) |
|
||||
| **SVG** | Vector graphics (scalable, high-fidelity) |
|
||||
| **JSON** | Full diagram data (nodes, edges, metadata) |
|
||||
| **Mermaid** | Mermaid.js code for use elsewhere |
|
||||
| **React** | Complete React component with React Flow |
|
||||
|
|
@ -124,37 +136,14 @@ kv-graph/
|
|||
| `Delete/Backspace` | Delete selected node |
|
||||
| `Escape` | Deselect / Close panel |
|
||||
|
||||
## 🎨 Theming
|
||||
|
||||
KV-Graph features a premium glassmorphism design with:
|
||||
|
||||
- **Dark Mode** — Deep void backgrounds with subtle gradients
|
||||
- **Light Mode** — Clean, minimal aesthetics
|
||||
- **Glass Panels** — Frosted glass effects with blur
|
||||
- **Smooth Animations** — Cinematic transitions
|
||||
|
||||
## 📜 Scripts
|
||||
|
||||
```bash
|
||||
# Development
|
||||
npm run dev # Start dev server with HMR
|
||||
|
||||
# Production
|
||||
npm run build # Build for production
|
||||
npm run preview # Preview production build
|
||||
|
||||
# Code Quality
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
## 🗺️ Roadmap
|
||||
|
||||
- [ ] Undo/Redo history
|
||||
- [x] Undo/Redo history
|
||||
- [x] API for programmatic generation
|
||||
- [x] Plugin system (Foundation)
|
||||
- [ ] Real-time collaboration
|
||||
- [ ] Custom node shapes
|
||||
- [ ] Template library
|
||||
- [ ] API for programmatic diagram generation
|
||||
- [ ] Plugin system
|
||||
|
||||
## 📄 License
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import { FlowCanvas } from '../components/FlowCanvas';
|
|||
import { NodeDetailsPanel } from '../components/NodeDetailsPanel';
|
||||
import InteractiveLegend from '../components/InteractiveLegend';
|
||||
import OnboardingTour from '../components/OnboardingTour';
|
||||
import { useFlowStore, useSettingsStore } from '../store';
|
||||
import { useFlowStore } from '../store';
|
||||
import { useMobileDetect } from '../hooks/useMobileDetect';
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import { PanelLeft, PanelRight, Zap, Sparkles, Minimize2, X, Cpu, Cloud, Server } from 'lucide-react';
|
||||
import { PanelLeft, PanelRight, Zap, Sparkles, Minimize2, X } from 'lucide-react';
|
||||
import { OrchestratorLoader } from '../components/ui/OrchestratorLoader';
|
||||
import { EditorHeader } from '../components/editor/EditorHeader';
|
||||
import { VisualOrganizerFAB } from '../components/VisualOrganizerFAB';
|
||||
|
|
@ -18,7 +18,6 @@ export function Editor() {
|
|||
useDiagramAPI();
|
||||
|
||||
const { nodes, isLoading, leftPanelOpen, setLeftPanelOpen, rightPanelOpen, setRightPanelOpen, focusMode, setFocusMode, mobileEditorOpen, setMobileEditorOpen } = useFlowStore();
|
||||
const { aiMode, onlineProvider } = useSettingsStore();
|
||||
const { isMobile } = useMobileDetect();
|
||||
const [sidebarWidth, setSidebarWidth] = useState(384); // Default w-96
|
||||
const isResizing = useRef(false);
|
||||
|
|
|
|||
Loading…
Reference in a new issue