📚 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ả (AI-powered)

✨ Lợi ích

• 🚀 Tiết kiệm thời gian: Không cần viết code từ đầu
• 📚 Học TikZ: Xem code được tạo để học cú pháp
• 💡 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

Cách sử dụng

Vẽ một đường tròn màu xanh bán kính 2cm, 
bên trong có một tam giác đều màu đỏ

Giới hạn và Rate Limiting

Tips để có kết quả tốt

Ví dụ thực tế

Mô tả:
Vẽ tam giác ABC với A(0,0), B(4,0), C(2,3).
Tô màu vàng, viền đen dày 2pt.

Kết quả:
\begin{tikzpicture}
\coordinate (A) at (0,0);
\coordinate (B) at (4,0);
\coordinate (C) at (2,3);
\draw[fill=yellow, draw=black, line width=2pt] (A) -- (B) -- (C) -- cycle;
\node[below] at (A) {A};
\node[below] at (B) {B};
\node[above] at (C) {C};
\end{tikzpicture}

Mô tả:
Draw a coordinate system from -2 to 2 on both axes.
Plot the function y = x^2 in red and y = 2x in blue.
Add grid and axis labels.

Kết quả:
\begin{tikzpicture}
\begin{axis}[
    xmin=-2, xmax=2,
    ymin=-2, ymax=4,
    grid=both,
    xlabel={$x$},
    ylabel={$y$}
]
\addplot[red, thick, domain=-2:2] {x^2};
\addplot[blue, thick, domain=-2:2] {2*x};
\legend{$y=x^2$, $y=2x$}
\end{axis}
\end{tikzpicture}

FAQ về tính năng AI

🔧 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}