📚 Tài liệu hướng dẫn TikZ2SVG

🚀 Giới thiệu tổng quan

✨ Tính năng chính

🛠️ Công nghệ sử dụng

• Backend: Python Flask, MySQL, LuaLaTeX, pdf2svg
• Frontend: Bootstrap 5, JavaScript ES6+, CodeMirror
• Email: Zoho Mail SMTP với rate limiting
• Security: OAuth 2.0 (Google), CSRF protection, input validation
• Performance: Caching, async processing, image optimization

📋 Hướng dẫn bắt đầu nhanh

\begin{tikzpicture}
  \draw (0,0) circle (1cm);
  \node at (0,0) {Hello World};
\end{tikzpicture}

🐍 Tạo TikZ từ mô tả — Hybrid Engine (Python + AI)

🏆 Tại sao Python Engine là Core chính?

✨ Lợi ích

• 🚀 Tốc độ nhanh: Python Engine xử lý trong ~100ms, không cần chờ đợi
• 🎯 Độ chính xác cao: Rule-based algorithms đảm bảo kết quả đúng 100%
• 📚 Học TikZ: Xem code được tạo để học cú pháp chuẩn
• 💡 Sáng tạo nhanh: Thử nghiệm ý tưởng một cách nhanh chóng
• 🌐 Đa ngôn ngữ: Hỗ trợ cả tiếng Việt và tiếng Anh
• 💚 Miễn phí: Python Engine không tốn API credits

⚡ Python Engine — Built-in Templates & Commands

vẽ bảng biến thiên của hàm số y = x^3 - 3x + 1
vẽ bảng biến thiên của hàm số y = (2x-3)/(x-1)
vẽ bảng biến thiên của hàm số y = (x^2-2x+9)/(x-2)
vẽ bảng biến thiên của hàm số y = sqrt(x^2-4x)

%!<\usepackage{tkz-tab}>
\begin{tikzpicture}
\tkzTabInit[lgt=2,espcl=2.5]
  {$x$ / 1 , $f'(x)$ / 1, $f(x)$ / 2}
  {$-2$, $-1$, $1$, $2$}
\tkzTabLine{, +, z, -, z, +, }
\tkzTabVar{-/ $0$, +/ $4$, -/ $0$, +/ $4$}
\end{tikzpicture}

vẽ đồ thị hàm số y = 2x + 3
vẽ đồ thị hàm số y = x^2 - 4x + 3
vẽ đồ thị hàm số y = x^3 - 3x^2 + 2x + 1
vẽ đồ thị hàm số y = (2x+1)/(x-1)
vẽ đồ thị hàm số y = (x^2+2x)/(2x-1)

\begin{tikzpicture}[line cap=round,line join=round,>=stealth]
\def\xmin{-2.23} \def\xmax{2.23}
\def\ymin{-3.0} \def\ymax{3.0}

% Vẽ đồ thị hàm số
\begin{scope}
\clip (\xmin,\ymin) rectangle (\xmax,\ymax);
\draw[smooth, samples=100, domain=\xmin:\xmax] plot (\x, {(\x)^3 - 3*(\x)});
\end{scope}

% Trục tọa độ
\draw[->] (\xmin,0)--(\xmax,0) node[above] {$x$};
\draw[->] (0,\ymin)--(0,\ymax) node[left] {$y$};
\fill (0,0) circle (1pt) node[below right] {$O$};
\end{tikzpicture}

Vẽ miền nghiệm hệ bất phương trình {x>=0; y>=0; 2x+5y<=10; x+y<=3}

\begin{tikzpicture}[line cap=round,line join=round,>=stealth]
% \usetikzlibrary{patterns}

\def\xmin{-1.0} \def\xmax{6.0}
\def\ymin{-1.0} \def\ymax{4.0}

\begin{scope}
\clip (\xmin,\ymin) rectangle (\xmax,\ymax);

% Tô miền KHÔNG nghiệm (miền nghiệm để trắng)
\fill[opacity=0.3,blue] (0,4) -- (-1,4) -- (-1,-1) -- (0,-1) -- cycle;
\fill[opacity=0.3,red] (-1,0) -- (-1,-1) -- (6,-1) -- (6,0) -- cycle;
\fill[opacity=0.3,green!70!black] (6,-0.4) -- (6,4) -- (-1,4) -- (-1,2.4) -- cycle;
\fill[opacity=0.3,orange] (4,-1) -- (6,-1) -- (6,4) -- (-1,4) -- cycle;

% Vẽ các đường thẳng
\draw[blue, thick] (0,\ymin) -- (0,\ymax);
\draw[red, thick] (\xmin,0) -- (\xmax,0);
\draw[green!70!black, thick] plot (\x, {(10 - 2*\x) / 5});
\draw[orange, thick] plot (\x, {(3 - \x)});
\end{scope}

% Trục tọa độ và giao điểm
\draw[->] (\xmin,0)--(\xmax,0) node[above] {$x$};
\draw[->] (0,\ymin)--(0,\ymax) node[left] {$y$};
\end{tikzpicture}

🔄 Intelligent Switching — Python Engine vs AI

🏆 Nguyên tắc cốt lõi

Quy trình xử lý request

┌─────────────────┐
│ User Input      │
│ (mô tả TikZ)    │
└────────┬────────┘
         │
         ▼
┌─────────────────────────────────┐
│ 1. Pattern Recognition          │
│    - Detect: "bảng biến thiên"  │
│    - Detect: "đồ thị hàm số"    │
│    - Detect: "miền nghiệm"      │
└────────┬────────────────────────┘
         │
         ▼
┌─────────────────────────────────┐
│ 2. Engine Selection             │
│    ┌─────────────┐              │
│    │ Match       │──▶ Python    │ ← 99% requests
│    │ Template?   │    Engine    │
│    └──────┬──────┘    (⚡ fast) │
│           │ No                  │
│           ▼                     │
│    ┌─────────────┐              │
│    │ Fallback    │──▶ AI       │ ← Chỉ khi cần
│    │ to AI       │    Engine    │
│    └─────────────┘    (🤖 flex) │
└────────┬────────────────────────┘
         │
         ▼
┌─────────────────┐
│ TikZ Code       │
│ Output          │
└─────────────────┘

⚡ Python Engine xử lý (deterministic, ~100ms)

Lợi ích của Hybrid Approach

Cách sử dụng

Giới hạn và Rate Limiting

FAQ về Hybrid Engine

🔧 Chức năng biên dịch chi tiết

Trình biên dịch TikZ cơ bản

• Input: CodeMirror editor với syntax highlighting
• Auto-detection: Tự động phát hiện packages, TikZ libraries, PGFPlots libraries
• Compilation: LuaLaTeX → PDF → SVG (pdf2svg)
• Preview: Real-time SVG preview với zoom/pan
• Error handling: Chi tiết log lỗi LaTeX với line numbers

Auto-detection thông minh

Hệ thống tự động phát hiện các packages sau:

🌏 Unicode & Multi-language Support

Ví dụ sử dụng chữ CJK

\setmainfont{STSong}  % Chỉ cần thêm dòng này!

\begin{tikzpicture}
  \node {中文: 富贵};                    % Tiếng Trung
  \node at (0,-1) {日本語: こんにちは};    % Tiếng Nhật
  \node at (0,-2) {한국어: 안녕하세요};    % Tiếng Hàn
\end{tikzpicture}

Fonts CJK có sẵn

• STSong (宋体) - ✅ Khuyến nghị cho văn bản thông thường
• Heiti TC/SC (黑体) - Chữ đậm, tiêu đề
• Kaiti TC/SC (楷书) - Thư pháp, chữ viết tay đẹp

📦 Manual Package Specification

Khi nào cần sử dụng?

• ✅ Hệ thống không tự động phát hiện package cần thiết
• ✅ Packages ít phổ biến hoặc mới
• ✅ Cần kiểm soát chính xác packages được load

Cú pháp: %!<commands>

%!<\usepackage{pgfornament}>
\begin{tikzpicture}
\pgfornament[width=2cm]{15}
\end{tikzpicture}

%!<\usepackage[siunitx]{circuitikz}>
\begin{tikzpicture}
\draw (0,0) to[R=1<\ohm>] (2,0)
          to[L=1<\henry>] (4,0)
          to[C=1<\farad>] (6,0);
\end{tikzpicture}

%!<\usepackage{circuitikz},\usepackage{pgfornament}>
\begin{tikzpicture}
\draw (0,0) to[R, o-o] (2,0);
\node at (3,0) {\pgfornament[width=1cm]{15}};
\end{tikzpicture}

%!<\usepackage{circuitikz}>
%!<\usepackage{pgfornament}>
\begin{tikzpicture}
\draw (0,0) to[R, o-o] (2,0);
\node at (3,0) {\pgfornament[width=1cm]{15}};
\end{tikzpicture}

%!<\usepackage{circuitikz},\usetikzlibrary{angles,quotes}>
\begin{tikzpicture}
\draw (0,0) to[R, o-o] (2,0);
\pic [draw, angle radius=5mm] {angle = A--B--C};
\end{tikzpicture}

Quy trình sử dụng

1. ✍️ Viết TikZ code như bình thường
2. 📦 Thêm dòng %!<...> ở đầu nếu cần package đặc biệt
3. ⚡ Biên dịch → Hệ thống tự động xử lý
4. ✅ Xem kết quả SVG như thường lệ

📮 Yêu cầu thêm Package mới

Khi nào cần sử dụng?

• ❓ Package bạn cần chưa có trong danh sách hỗ trợ
• 🆕 Muốn sử dụng package mới hoặc ít phổ biến
• 🤝 Đóng góp mở rộng thư viện cho cộng đồng

Cách gửi yêu cầu

Quy trình xét duyệt

Thời gian xử lý

• ⚡ Khẩn cấp: 1-2 ngày làm việc
• 🟠 Ưu tiên cao: 3-5 ngày làm việc
• 🟡 Trung bình: 1-2 tuần
• 🟢 Thấp: 2-4 tuần

Tips để yêu cầu được chấp nhận

🎨 Quản lý File SVG & Menu Actions

Giao diện File Card

Mỗi SVG file được hiển thị dưới dạng "thẻ" (card) bao gồm:

• 📷 Ảnh preview: Hiển thị SVG đã tạo
• 👤 Thông tin tác giả: Tên người tạo và thời gian
• ❤️ Nút Like: Thể hiện sự yêu thích
• ⋯ Menu actions: Các hành động có thể thực hiện
• 💻 Code section: TikZ code (có thể ẩn/hiện)

Cách sử dụng Menu Actions

Các hành động có thể thực hiện

Hệ thống Like (Yêu thích)

🔄 Chuyển đổi định dạng

Định dạng được hỗ trợ

• SVG → PNG: Chuyển đổi raster với tùy chỉnh chiều rộng/cao/DPI
• SVG → JPEG: Chuyển đổi chất lượng cao với tùy chọn nén
• Xử lý hàng loạt: Chuyển đổi nhiều file cùng lúc

Cách chuyển đổi định dạng

Giới hạn kích thước & Kiểm tra

• Tối đa pixels: 60MP tổng cộng (60,000,000 pixels)
• Tối đa DPI: 2000 DPI
• Kiểm tra: Hệ thống kiểm tra trước khi chuyển đổi
• Thông báo lỗi: Phản hồi rõ ràng khi vượt giới hạn

💬 Hệ thống Comments

Tính năng chính

• ✅ Bình luận & trả lời với cấu trúc thread (parent → replies)
• ✅ LaTeX math support inline $x^2$ và display $$\int f(x) dx$$
• ✅ TikZ code blocks với syntax \code{...} và copy button
• ✅ Real-time preview MathJax rendering khi gõ
• ✅ Like/Unlike comments để đánh giá chất lượng
• ✅ Edit & Delete comments của chính mình
• ✅ Pagination tự động load thêm comments

LaTeX Math Support

TikZ Code Blocks

Vẽ circle đơn giản:

\code{
\tikz \draw (0,0) circle (1cm);
}

Like & Unlike Comments

1. Đọc comment hữu ích hoặc hay
2. Click nút 👍 ở footer comment
3. Button chuyển màu xanh (liked state)
4. Click lại để unlike → Button về trạng thái mặc định

Edit & Delete Comments

👤 Profile & Tương tác xã hội

Quản lý Profile

• Tải ảnh đại diện: Hỗ trợ nhiều định dạng (PNG, JPG, GIF)
• Chỉnh sửa tiểu sử: Soạn thảo rich text với hỗ trợ markdown
• Trang cài đặt: /profile/{user_id}/settings
• Profile công khai: /profile/{user_id} có thể xem bởi người khác

Follow/Unfollow System

Tương tác xã hội

• ❤️ Like/Unlike: Thể hiện sở thích với SVG của người khác
• 👀 Xem profile: Click vào tên tác giả để xem profile
• 👥 Follow từ profile: Follow người dùng từ trang profile
• 📋 Theo dõi hoạt động: Xem timeline các SVG mới

🛡️ Xác thực danh tính & Bảo mật

Tại sao cần xác thực?

• 🔒 Bảo mật cao hơn: Xác nhận email thật
• 👥 Unlock features: Follow/Unfollow yêu cầu verified account
• ✅ Uy tín: Badge "Đã xác thực" tăng trust
• 🚀 Priority access: Features mới ưu tiên cho verified users

Quy trình xác thực 5 bước

Lợi ích khi xác thực

🔍 Tìm kiếm & Từ khóa

Enhanced Search Bar với hai chế độ

Cách sử dụng Search Bar

1. Chọn loại tìm kiếm: Click button "Từ khóa" hoặc "Tên tài khoản"
2. Nhập và tìm kiếm:
   • Mode từ khóa: Gõ từ khóa → chọn từ suggestions → Enter
   • Mode tên tài khoản: Gõ username → Enter
3. Xem kết quả: Grid layout với tất cả SVG files matching

Hệ thống từ khóa

• Gắn thẻ cho SVG: Nhập keywords khi lưu SVG
• Gợi ý tự động: Hệ thống gợi ý từ keywords có sẵn
• Không phân biệt hoa thường: "Circle" và "circle" như nhau

🛠️ Xử lý lỗi & Troubleshooting

Lỗi biên dịch LaTeX

Vấn đề Upload/Lưu file

Vấn đề xác thực

• Google OAuth: Check OAuth settings, scope permissions
• Email not received: Check spam folder, wait 2-3 minutes
• Code expired: Request new verification code
• Max attempts: Wait 24 hours for reset

Tương thích trình duyệt

• Modern browsers: Chrome 80+, Firefox 75+, Safari 13+
• JavaScript required: Enable JavaScript for full functionality
• Cookies required: Enable cookies for authentication
• Local storage: Required for user preferences

💡 Tips & Best Practices

TikZ Code Examples Library

% Circle with label
\begin{tikzpicture}
\draw (0,0) circle (1cm);
\node at (0,0) {Center};
\end{tikzpicture}

% Rectangle with rounded corners
\begin{tikzpicture}
\draw[rounded corners=5pt] (0,0) rectangle (3,2);
\end{tikzpicture}

% Function plot
\begin{tikzpicture}
\begin{axis}[domain=-2:2]
\addplot {x^2};
\end{axis}
\end{tikzpicture}

% Geometric construction
\begin{tikzpicture}
\coordinate (A) at (0,0);
\coordinate (B) at (3,0);
\coordinate (C) at (1,2);
\draw (A) -- (B) -- (C) -- cycle;
\pic [draw, angle radius=8mm, "$\alpha$"] {angle = B--A--C};
\end{tikzpicture}

%!<\usepackage{circuitikz}>
\begin{tikzpicture}
\draw (0,0) to[R=1<\ohm>] (2,0)
      to[L=1<\henry>] (4,0)
      to[C=1<\farad>] (6,0);
\end{tikzpicture}

Sử dụng trên nhiều thiết bị

❓ Câu hỏi thường gặp (FAQ)

\setmainfont{STSong}
\begin{tikzpicture}
  \node {中文: 富贵};  % Tiếng Trung hiển thị HOÀN HẢO
\end{tikzpicture}