+
+
+ + + {title} + +
+ ++ {description} +
+ +
+
+ {readingTime && {readingTime} min read}
+
+
+
+ Read more
+
+
+
+ 
+
+ )}
+
+
+ {categoryIcons[category] || '📦'}
+ {category}
+
+
+ + {title} +
+ ++ {description} +
+ +
+ {tech.map((t) => (
+
+ {t}
+
+ ))}
+
+
+ {links && (
+
+ {links.website && (
+
+
+ Website
+
+ )}
+ {links.github && (
+
+
+ )}
+
+ 
+ 
+ 
+
+
+
+## Prerequisites
+This tutorial is not the only way to fine-tune Flux.1-dev LoRA, you can train Flux.1-dev LoRA on Google colab, or using online services. But because this tutorial is using local GPU, you need to prepare the following to run it smoothly:
+* You are a developer
+* OS: Ubuntu Linux
+* Nvidia GPU, at least 12GB VRAM
+* Python 3.10 or 3.11
+
+I did not write the code for this training. Instead, I used [SimpleTuner](https://github.com/bghira/SimpleTuner/blob/main/documentation/quickstart/FLUX.md) to fine-tune Flux.1-dev LoRA. You can refer directly to the SimpleTuner documentation for instructions on fine-tuning Flux.1-dev LoRA.
+
+## Environment Setup
+
+```bash
+$ git clone --branch=release https://github.com/bghira/SimpleTuner.git
+
+$ cd SimpleTuner
+
+
+$ python -m venv .venv
+
+$ source .venv/bin/activate
+
+$ pip install -U poetry pip
+
+$ poetry config virtualenvs.create false
+
+$ poetry install
+```
+
+## Dataset preparation
+
+### The dataset
+
+To create your own Flux model, you need to prepare some of your images, just 5 images is enough, but 20 images is better. The quality of the image contributes greatly to the effectiveness of the model, consider the following factors:
+* WebP, JPG, and PNG formats are all supported
+* Use 1024x1024 or higher resolution if possible.
+* The photo shows a clear face, without accessories, eg glasses.
+* Photos share different angles of the face.
+* The photo collection should be diverse (e.g. angles, outfits, ...)
+* Photos should be taken within the last 6 months.
+
+
+Credits: [Replicate](https://replicate.com/blog/fine-tune-flux-with-faces)
+
+### The trigger word
+
+When fine-tuning Flux with your images, it's essential to choose a unique trigger word that represents your face. This trigger word will act as a key for generating images of your likeness. Ideally, the trigger word should be distinct and specific to your face, avoiding any overlap with common objects or concepts to ensure accurate results.
+
+Here are the tips to choose a good trigger word:
+* The trigger word should not be a word found in any language dictionary. For example, 'face' or 'flower' is not a good trigger word.
+* Make it short, because it will take some space in the prompt.
+* Example: hieunv3, behitek are good trigger words.
+
+**Reason**: The words in dictionary can be easily recognized by the model, and the model will not be able to generate images of your likeness.
+
+### Generate captions
+
+For better quality, you should generate a caption for each image. Here, I will use the [Microsoft Florence 2](https://huggingface.co/multimodalart/Florence-2-large-no-flash-attn) model to generate captions for the images. You can also use ChatGPT, llava or llama3.2 to generate captions.
+
+After captions are generated, add your trigger word to the beginning of the captions. For example (using behitek as the trigger word):
+
+
+
+Do organize your images and captions in a folder, and put them in a folder with structure like this:
+
+```bash
+$ tree .
+
+├── 1000003258.jpg
+├── 1000003258.txt
+├── 1000003259.jpg
+├── 1000003259.txt
+├── 1000003262.jpg
+├── 1000003262.txt
+├── 1000003263.jpg
+├── 1000003263.txt
+├── 1000003264.jpg
+├── 1000003264.txt
+├── 1000003265.jpg
+├── 1000003265.txt
+├── IMG_20220326_135114.jpg
+├── IMG_20220326_135114.txt
+├── IMG_20220706_184917.jpg
+├── IMG_20220706_184917.txt
+├── IMG_20230512_150235.jpg
+├── IMG_20230512_150235.txt
+├── IMG_20230719_065425.jpg
+├── IMG_20230719_065425.txt
+```
+
+Where *.JPG is the image, and the same file name with extension *.TXT contains the caption of the image. I will assume this dataset directory is located in `/path/to/datasets/behitek-lora`.
+
+## Training configuration
+
+Go back to SimpleTuner, you can find the configuration sample in the `config` folder.
+
+### Create your own config
+```bash
+cd config/
+cp config.json.example config.json
+cp lycoris_config.json.example lycoris_config.json
+cp user_prompt_library.json.example user_prompt_library.json
+cp multidatabackend.json.example dataset.behitek.json
+```
+
+I will provide you a sample config for you to fine-tune Flux.1-dev LoRA, with trigger word behitek.
+
+### The config.json
+
+This is the config.json file, update the following key:
+* `--validation_prompt`, enter your prompt with trigger word.
+* `--data_backend_config`, `--output_dir`, `--lycoris_config`, and `--user_prompt_library`, make sure they are correct.
+
+```json
+{
+ "--resume_from_checkpoint": "latest",
+ "--data_backend_config": "config/dataset.behitek.json",
+ "--aspect_bucket_rounding": 2,
+ "--seed": 42,
+ "--minimum_image_size": 0,
+ "--output_dir": "output/behitek-lycoris-v0.1",
+ "--lora_type": "lycoris",
+ "--lycoris_config": "config/lycoris_config.json",
+ "--max_train_steps": 10000,
+ "--num_train_epochs": 0,
+ "--checkpointing_steps": 1000,
+ "--checkpoints_total_limit": 5,
+ "--hub_model_id": "simpletuner-lora",
+ "--push_to_hub": "false",
+ "--push_checkpoints_to_hub": "false",
+ "--tracker_project_name": "lora-training",
+ "--tracker_run_name": "simpletuner-lora",
+ "--report_to": "tensorboard",
+ "--model_type": "lora",
+ "--pretrained_model_name_or_path": "black-forest-labs/FLUX.1-dev",
+ "--model_family": "flux",
+ "--train_batch_size": 1,
+ "--gradient_checkpointing": "true",
+ "--caption_dropout_probability": 0.1,
+ "--resolution_type": "pixel_area",
+ "--resolution": 1024,
+ "--validation_seed": 42,
+ "--validation_steps": 1000,
+ "--validation_resolution": "1024x1024",
+ "--validation_guidance": 3.0,
+ "--validation_guidance_rescale": "0.0",
+ "--validation_num_inference_steps": "20",
+ "--validation_prompt": "behitek a man sitting on a chair wearing a white shirt, focused on the book he is holding in his hand. On the table in front of him is an object, and behind him are a few people, trees, and a blue sky",
+ "--mixed_precision": "bf16",
+ "--optimizer": "adamw_bf16",
+ "--learning_rate": "1e-4",
+ "--lr_scheduler": "polynomial",
+ "--lr_warmup_steps": 100,
+ "--validation_torch_compile": "false",
+ "--disable_benchmark": "false",
+ "--base_model_precision": "int8-quanto",
+ "--text_encoder_1_precision": "no_change",
+ "--text_encoder_2_precision": "no_change",
+ "--lora_rank": 16,
+ "--max_grad_norm": 1.0,
+ "--base_model_default_dtype": "bf16",
+ "--user_prompt_library": "config/user_prompt_library.json"
+}
+```
+**Notes**:
+* I use `base_model_precision=int8-quanto` for VRAM saving.
+* Every `validation_steps`, the model will generate validation images, and save them to the `validation_images` folder inside the `output_dir`.
+* `train_batch_size=1` is a recommended value (by SimpleTuner) for small dataset.
+
+### The user_prompt_library.json
+The `user_prompt_library.json` file is a list of prompts, you can add prompts here. During the model validation, it will generate images based on these prompts. Example:
+
+```json
+{
+ "behitek_1": "behitek A 30-year-old man with a rugged yet stylish look, dressed in a beige explorer jacket with cargo pants, standing on the edge of a cliff at sunset, overlooking a vast canyon. His expression is a mix of awe and determination. The scene is rich with glowing orange and red hues, with wind tousling his hair.",
+ "behitek_2": "behitek A 30-year-old man with a sharp jawline, wearing a sleek black turtleneck and tailored gray trousers, walking confidently down a bustling city street. Neon lights from billboards reflect on the wet pavement, creating a vibrant, futuristic cityscape."
+}
+```
+
+### The dataset.behitek.json
+
+The `dataset.behitek.json` file:
+
+```json
+
+[
+ {
+ "id": "behitek-subject",
+ "type": "local",
+ "crop": true,
+ "crop_style": "center",
+ "crop_aspect": "square",
+ "resolution": 1024,
+ "minimum_image_size": 1024,
+ "maximum_image_size": 1024,
+ "target_downsample_size": 1024,
+ "resolution_type": "pixel_area",
+ "cache_dir_vae": "cache/vae/flux/behitek-subject",
+ "instance_data_dir": "/path/to/datasets/behitek-lora",
+ "caption_strategy": "textfile",
+ "instance_prompt": "behitek",
+ "metadata_backend": "discovery",
+ "is_regularisation_data": false,
+ "repeats": 1000
+ },
+ {
+ "id": "behitek-subject-512",
+ "type": "local",
+ "crop": true,
+ "crop_style": "center",
+ "crop_aspect": "square",
+ "resolution": 512,
+ "minimum_image_size": 512,
+ "maximum_image_size": 512,
+ "target_downsample_size": 512,
+ "resolution_type": "pixel_area",
+ "cache_dir_vae": "cache/vae/flux/behitek-subject-512",
+ "instance_data_dir": "/path/to/datasets/behitek-lora",
+ "caption_strategy": "textfile",
+ "instance_prompt": "behitek",
+ "metadata_backend": "discovery",
+ "is_regularisation_data": false,
+ "repeats": 1000
+ },
+ {
+ "id": "text-embeds",
+ "type": "local",
+ "dataset_type": "text_embeds",
+ "default": true,
+ "cache_dir": "cache/text/flux",
+ "disabled": false,
+ "write_batch_size": 128
+ }
+]
+```
+
+**Notes:**
+* Make sure to correct the `instance_data_dir` to your dataset directory.
+* If your image dimension is smaller than 1024x1024, you will got the error: `No images were discovered by the bucket ...`.
+* There is several `caption_strategy`, but `textfile` is the right setting.
+* `repeats` is the number of times to repeat the same image, 1000 is a good number.
+
+
+### The lycoris_config.json
+
+For the `lycoris_config.json` file, leave it as it is, the default setting is fine.
+
+## Training
+
+Still in the root directory of SimpleTuner, run the following command:
+
+```bash
+$ tmux new -s train # create a new tmux session
+$ source ./venv/bin/activate
+./train.sh
+```
+
+During training, the model will generate images based on the prompts in the `user_prompt_library.json` and `validation_prompt` in the config file, these images is save in your `output_dir`.
+
+### Training Experience
+
+- If your dataset consists only of faces (neck and head) with a clean background, you don't need to generate captions. Simply use `caption_strategy: "instanceprompt"`, where the `instanceprompt` serves as the trigger word. In this case, 2000 training steps are sufficient.
+- For diverse data (e.g., different outfits, backgrounds, or even the same person in varied settings), generating captions is recommended. With more diverse data, training for more steps is beneficial. For example, 10,000 steps is a good benchmark.
+- If you're unsure when the model has converged, check the loss curve in TensorBoard and save additional checkpoints for safety.
+
+## Inference
+
+Once the model is trained, you can use the below Python script (not a clean code) to generate images:
+
+```python
+import torch
+from diffusers import DiffusionPipeline
+from lycoris import create_lycoris_from_weights
+import os
+
+model_id = 'black-forest-labs/FLUX.1-dev'
+adapter_file_path = "/path/to/output_dir/pytorch_lora_weights.safetensors"
+pipeline = DiffusionPipeline.from_pretrained(model_id, torch_dtype=torch.bfloat16) # loading directly in bf16
+lora_scale = 1.0
+wrapper, _ = create_lycoris_from_weights(lora_scale, adapter_file_path, pipeline.transformer)
+wrapper.merge_to()
+
+
+## Optional: quantise the model to save on vram.
+## Note: The model was quantised during training, and so it is recommended to do the same during inference time.
+from optimum.quanto import quantize, freeze, qint8
+quantize(pipeline.transformer, weights=qint8)
+freeze(pipeline.transformer)
+
+output_dir = os.path.join("output", "behitek-hitech")
+os.makedirs(output_dir, exist_ok=True)
+
+
+prompts = [
+ "behitek A 30-year-old man with a rugged yet stylish look, dressed in a beige explorer jacket with cargo pants, standing on the edge of a cliff at sunset, overlooking a vast canyon. His expression is a mix of awe and determination. The scene is rich with glowing orange and red hues, with wind tousling his hair.",
+ "behitek A 30-year-old man with a sharp jawline, wearing a sleek black turtleneck and tailored gray trousers, walking confidently down a bustling city street. Neon lights from billboards reflect on the wet pavement, creating a vibrant, futuristic cityscape.",
+ "behitek A young man, 30 years old, sitting in a high-tech office filled with holographic screens and futuristic gadgets. He's wearing a casual blazer over a graphic T-shirt and glasses with a subtle glow, symbolizing augmented reality.",
+ "behitek A 30-year-old warrior with a chiseled physique, clad in intricate silver armor with glowing blue runes. He holds a massive sword that emits a faint magical aura. He stands on a battlefield surrounded by mythical creatures under a dark, stormy sky.",
+ "behitek A 30-year-old man with a cheerful demeanor, dressed in outdoor gear, standing beside a sparkling mountain lake. A camera hangs from his neck, and his backpack is packed with supplies. The serene landscape features towering pine trees and a snow-capped peak in the background.",
+ "behitek A young man, 30 years old, styled in 1980s adventure fashion—khaki shorts, a buttoned shirt, and a leather satchel. He is mid-action, leaping over a crumbling stone bridge in an ancient jungle temple, vines and artifacts all around.",
+ "behitek A 30-year-old man in a contemporary interpretation of samurai attire, blending traditional armor with urban streetwear. He holds a katana and stands in an empty urban alley lit by paper lanterns, exuding a calm yet powerful presence.",
+ "behitek A young man in his 30s, dressed in a futuristic spacesuit with a sleek, glowing helmet. He floats in the vastness of space, with a swirling galaxy visible in the background. The stars and nebulae create a stunning, ethereal glow.",
+ "behitek A 30-year-old man in Renaissance clothing—ruffled shirt and velvet coat—standing in an ornate studio. He is surrounded by canvases, sculptures, and paints. His face reflects deep concentration as he works on a masterpiece.",
+ "behitek A young man, 30 years old, sitting in a grand library filled with towering shelves of ancient books. He's wearing a long coat with mystical symbols embroidered in gold, surrounded by floating magical texts and glowing orbs."
+]
+
+import random
+for idx, prompt in enumerate(prompts):
+ for i in range(30):
+ print(f"Generating image {i}")
+ seed = random.randint(0, 1000000000)
+ pipeline.to('cuda' if torch.cuda.is_available() else 'mps' if torch.backends.mps.is_available() else 'cpu') # the pipeline is already in its target precision level
+ image = pipeline(
+ prompt=prompt,
+ num_inference_steps=20,
+ generator=torch.Generator(device='cuda' if torch.cuda.is_available() else 'mps' if torch.backends.mps.is_available() else 'cpu').manual_seed(seed),
+ width=1024,
+ height=1024,
+ guidance_scale=3.0,
+ ).images[0]
+ image.save(os.path.join(output_dir, f"{idx}_{seed}.png"), format="PNG")
+```
+
+With the same prompt, try changing the seed to get different results. In the above bad code, I do generate 30 images for each prompt. From many generated images, you can select some good ones.
+
+
+That's it! You have now created a Flux LoRa model.
+
+## Reference
+* [Sample work: salmonrusty/simpletuner-lora](https://huggingface.co/salmonrusty/simpletuner-lora#training-settings)
+* [SimpleTuner](https://github.com/bghira/SimpleTuner)
+* [Fine-tune FLUX.1 to create images of yourself](https://replicate.com/blog/fine-tune-flux-with-faces)
diff --git a/new-site/src/content/blog/inverted-hyde.mdx b/new-site/src/content/blog/inverted-hyde.mdx
new file mode 100644
index 0000000..90c96b1
--- /dev/null
+++ b/new-site/src/content/blog/inverted-hyde.mdx
@@ -0,0 +1,176 @@
+---
+title: "Inverted HyDE: Solving Real-World Dense Retrieval Challenges"
+description: An innovative approach to dense retrieval that addresses practical limitations of HyDE by flipping the script - generating hypothetical queries offline instead of hypothetical documents in real-time.
+date: 2025-09-07
+author: "Hieu Nguyen"
+language: "en"
+category: "AI/ML"
+tags: ["RAG", "dense retrieval", "search", "LLM", "information retrieval"]
+image: "/images/blog/inverted-hyde.jpeg"
+draft: false
+---
+
+Dense retrieval systems have revolutionized how we search through large document collections, but the gap between theoretical breakthroughs and production reality often reveals unexpected challenges. While HyDE (Hypothetical Document Embeddings) showed impressive results in research settings, its real-world deployment faces critical bottlenecks that limit its practical adoption. Enter Inverted HyDE - a clever twist that maintains the core benefits while addressing the fundamental production constraints.
+
+## Introduction
+
+Dense retrieval has become the backbone of modern search systems, from enterprise knowledge bases to customer support platforms. Unlike traditional keyword-based search, dense retrieval uses neural embeddings to capture semantic similarity, enabling more nuanced understanding of user queries and document content.
+
+The original HyDE approach, introduced by Gao et al., proposed an elegant solution to a fundamental mismatch in retrieval systems: queries and documents often exist in different linguistic spaces. A user might ask "How do I reset my password?" while the relevant document contains procedural text like "Navigate to Settings, select Account Security, then click Reset Credentials." HyDE bridges this gap by generating a hypothetical document that answers the query, then using this synthetic document for retrieval instead of the original query.
+
+While theoretically sound and empirically promising, HyDE's real-world implementation reveals critical limitations that make it challenging to deploy in production environments where latency, reliability, and cost matter as much as accuracy.
+
+## The Reality Check: HyDE's Industrial Challenges
+
+Despite its theoretical elegance, HyDE faces two major obstacles in production deployments that significantly impact its viability:
+
+### Latency Issues: The Real-Time Generation Bottleneck
+
+Every user query in HyDE requires real-time LLM generation to create the hypothetical document. This introduces several latency concerns:
+
+- **Additional network round-trips**: Each query now requires a call to an LLM service before the actual retrieval can begin
+- **Generation time overhead**: LLM requests typically take 1-5 seconds, dramatically increasing query response times
+- **Queue congestion**: During peak usage, LLM API rate limits can create cascading delays
+- **Timeout risks**: LLM generation failures require fallback mechanisms, complicating the retrieval pipeline
+
+In user-facing applications where sub-second response times are expected, this additional latency can significantly degrade user experience. Search systems now require 1-5 more seconds just for the preprocessing step, representing a much more significant increase in response time.
+
+### Reliability Problems: The Domain-Specific Query Challenge
+
+LLMs, despite their impressive capabilities, struggle with domain-specific or highly technical queries. This creates reliability issues in specialized environments:
+
+- **Domain knowledge gaps**: LLMs may lack sufficient training data for niche industries, leading to poor hypothetical document generation
+- **Complex query failures**: Multi-part questions or queries with specific constraints often result in generic or irrelevant hypothetical documents
+- **"Sorry, I don't know" responses**: When LLMs cannot generate meaningful content, they may return empty responses or disclaimers, breaking the retrieval pipeline
+- **Inconsistent quality**: The same query might generate different quality hypothetical documents depending on model temperature and prompt variations
+
+These reliability issues are particularly problematic in enterprise environments where users expect consistent performance across diverse query types and specialized domains.
+
+## Inverted HyDE: Flipping the Script
+
+Inverted HyDE addresses these production challenges through a fundamental shift in approach: instead of generating hypothetical documents from queries at query time, we generate hypothetical queries from documents during indexing time.
+
+### The Core Concept
+
+The inverted approach works as follows:
+
+1. **Offline Processing**: For each document in your corpus, use an LLM to generate multiple hypothetical queries that the document could answer
+2. **Query Enrichment**: Store these generated queries alongside or instead of the original document content
+3. **Runtime Matching**: When a user submits a query, match it against the pre-generated query space rather than the original document space
+4. **Retrieval**: Return the documents associated with the most similar hypothetical queries
+
+This approach transforms the matching problem from "query-to-document" similarity to "query-to-query" similarity, which often produces more accurate results due to better linguistic alignment.
+
+### Example in Practice
+
+Consider a technical documentation page about API authentication:
+
+**Original Document**: "The authentication endpoint accepts POST requests with client_id and client_secret parameters. Upon successful validation, it returns a JSON response containing an access_token with a 3600-second expiration..."
+
+**Generated Hypothetical Queries**:
+- "How do I authenticate with the API?"
+- "What parameters does the auth endpoint need?"
+- "How long do access tokens last?"
+- "What format does the authentication response use?"
+
+When a user searches for "API authentication process," the system matches against these pre-generated queries rather than the technical documentation text, leading to more accurate retrieval.
+
+## Why This Works Better
+
+Inverted HyDE offers several key advantages over the original approach:
+
+### Keep the original speed characteristics
+
+The most immediate benefit is the complete elimination of query-time LLM generation. All hypothetical content is generated offline during document processing, meaning:
+
+- **Query response times**: Retrieval returns to its original speed characteristics
+- **No LLM API dependencies**: The runtime system operates independently of external LLM services
+- **Predictable performance**: Query latency becomes deterministic and independent of LLM service availability
+
+### Improved Reliability
+
+By moving generation offline, we gain several reliability advantages:
+
+- **Quality control opportunities**: Generated queries can be reviewed, filtered, and improved before indexing
+- **Consistent performance**: The same document always has the same set of hypothetical queries
+- **Graceful degradation**: Even if query generation fails for some documents, the system continues to function
+- **Domain specialization**: More time and computational resources can be invested in generating high-quality domain-specific queries
+
+### Domain Agnostic Performance
+
+The offline approach allows for domain-specific optimizations:
+
+- **Specialized prompts**: Different document types can use tailored query generation prompts
+- **Expert review**: Domain experts can validate and improve generated queries before deployment
+- **Iterative improvement**: Query generation can be refined based on user feedback and search analytics
+
+### Linguistic Alignment Benefits
+
+Query-to-query matching provides superior semantic alignment:
+
+- **Natural language consistency**: Both user queries and generated queries are in natural question format
+- **Intent preservation**: Generated queries capture the intent and information need rather than just keywords
+- **Contextual nuance**: Questions naturally encode the context and specificity of information needs
+
+## Implementation Considerations
+
+Successfully deploying Inverted HyDE requires careful attention to several practical aspects:
+
+### Storage and Indexing Implications
+
+The inverted approach changes storage requirements:
+
+- **Increased storage needs**: Each document now stores multiple generated queries (typically 3-10 per document)
+- **Index structure modifications**: Vector databases need to accommodate query-document associations
+- **Metadata management**: Systems must track which queries belong to which documents and maintain these relationships
+
+**Storage Strategy Options**:
+```
+Option 1: Separate query index
+- Store generated queries in a dedicated index
+- Maintain document ID mappings
+- Allows independent optimization of query and document storage
+
+Option 2: Enriched document storage
+- Append generated queries to document metadata
+- Single index with enriched content
+- Simpler architecture but larger storage footprint
+```
+
+### Query Generation Strategies
+
+Effective implementation requires thoughtful query generation:
+
+**Diversity Strategies**:
+- Generate questions at different specificity levels (broad vs. narrow)
+- Create queries for different user personas (beginner vs. expert)
+- Include both direct questions and contextual queries
+
+**Quality Control Mechanisms**:
+- Implement automated filtering for generic or low-quality queries
+- Use similarity thresholds to avoid near-duplicate generated queries
+- Establish human review processes for critical document collections
+
+### Update Cycles and Content Management
+
+Document changes require coordinated updates:
+
+- **Incremental updates**: When documents change, regenerate only affected queries
+- **Batch processing**: Optimize LLM usage through batch query generation
+- **Version control**: Maintain query generation history for rollback capabilities
+
+### Performance Optimization
+
+Several techniques can optimize the inverted approach:
+
+- **Query clustering**: Group similar generated queries to reduce index size
+- **Selective generation**: Focus query generation on high-value documents
+- **Hybrid approaches**: Combine generated queries with original document content for comprehensive coverage
+
+## Conclusion
+
+Inverted HyDE represents a pragmatic evolution of the original HyDE concept, addressing real-world production constraints while maintaining its core benefits. By shifting the computational burden from query time to indexing time, this approach eliminates latency bottlenecks and reliability issues that plague real-time generation systems.
+
+The key insight is recognizing that production search systems have different constraints than research environments. While the original HyDE optimized for retrieval accuracy, Inverted HyDE optimizes for the complete production equation: accuracy, latency, reliability, and operational complexity.
+
+For teams implementing dense retrieval in production environments, Inverted HyDE offers a compelling path forward - one that maintains the semantic benefits of hypothesis-based retrieval while respecting the operational requirements that ultimately determine system success.
diff --git a/new-site/src/content/blog/opensource-github-copilot.mdx b/new-site/src/content/blog/opensource-github-copilot.mdx
new file mode 100644
index 0000000..c32294c
--- /dev/null
+++ b/new-site/src/content/blog/opensource-github-copilot.mdx
@@ -0,0 +1,141 @@
+---
+title: "Open-source AI code assistant Setup Guide"
+description: "Setup your local AI Code Assistant with just a few steps to replace Github Copilot - Help you save money and better data privacy."
+date: 2024-10-08
+author: "Hieu Nguyen"
+language: "en"
+category: "Tutorial"
+tags: ["Tool", "VSCode", "LLM"]
+image: "/images/blog/continue-dev.png"
+draft: false
+---
+
+Looking for a good alternative to Github Copilot? The answer is [Continue.dev](https://continue.dev) - An open source AI code assistant that can help you write better code faster. Again, I want to emphasize that it is an open source project, and it give you more control over your data by hosting them on your own computer, including its model.
+
+## Introduction
+
+An AI coding assistant often have two main functions (including Github Copilot):
+- Code autocomplete (to suggest next lines of code based on the current context).
+- Chatbot (to interact with your code).
+
+The two functions are depend on the large language model (LLM), which is trained by massive data - I guess the training data for this kind of LLM contains a lot of stackoverflow and Github data.
+
+This article will guide you how to setup a local AI code assistant with Continue (for AI code assistant functions) and Ollama (for self-hosted LLM).
+
+## Prerequisites
+
+Because we are self-hosted our AI code assistant, so we need some resources to run it.
+
+- For minimum, your machine must able to hosted at least a 3B LLM model, i.e. 6GB VRAM or more.
+- For better performance, you can use a GPU with 8GB VRAM or more.
+- Or you have a macbook air M1 or above
+
+**Note:**
+- Continue support both VSCode and JetBrains IDEs (PyCharm, IntelliJ, WebStorm,...). I will use VSCode as an example in this article.
+- This article is for Ubuntu/Debian users, but you can follow the same steps to setup on other OS.
+
+## Installation
+
+### Step 1 - Install Ollama
+
+To install (or upgrade) Ollama, run the following command:
+
+```sh
+curl -fsSL https://ollama.com/install.sh | sh
+```
+
+This will download and install the latest version of Ollama on your machine. Later you can use `ollama` to manage your LLM models.
+
+### Step 2 - Download LLMs
+
+Because two functions (autocomplete and chatbot) are very different, so it is better if we have two separate LLMs for each function. But if your machine is not powerful enough, you can use a single model for both functions.
+
+**For autocomplete**:
+- Try `deepseek-coder:1.3b-base` if you don't have much resources.
+- Try `deepseek-coder:6.7b-base` if your machine is powerful enough.
+
+To download a model, run the following command (eg: `deepseek-coder:6.7b-base`):
+
+```sh
+ollama pull deepseek-coder:6.7b-base
+```
+
+**For chatbot (Optional):**
+
+You have many option for this function, you can pick one of bellow:
+- Qwen2.5 Coder 7B(`qwen2.5-coder`)
+- Llama3.1 8B (`llama3.1`)
+- DeepSeek Coder 2 16B (`deepseek-coder-v2`)
+- ...
+
+To download a model, run the following command (eg: `Qwen2.5 Coder`):
+
+```
+ollama run qwen2.5-coder
+```
+
+The recommended models above is not by me, its from Model Setup documentation of Continue.dev, you can check it out at:
+- [Autocomplete Model Setup](https://docs.continue.dev/autocomplete/model-setup)
+- [Chatbot Model Setup](https://docs.continue.dev/chat/model-setup)
+
+They said that the models they recommended are tested and work best with their platform (i.e. the prompting) to do the tasks. You should check their documentation for an up-to-date information.
+
+### Step 3. Keep your LLM loaded in memory
+
+By default, Ollama will unload the model after 5 minutes of inactivity. If you want to keep it loaded in memory, run this command:
+
+```sh
+curl http://localhost:11434/api/generate -d '{"model": "deepseek-coder:6.7b-base", "keep_alive": -1}'
+```
+
+The `keep_alive = -1` means that the model will be kept loaded in memory forever. You can unload it by setting `keep_alive = 0`.
+
+For more information, check out [Ollama FAQ](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-do-i-keep-a-model-loaded-in-memory-or-make-it-unload-immediately).
+
+### Step 4. Install Continue.dev extension
+
+You can easy install Continue.dev extension from Visual Studio Code Marketplace: [Continue.dev](https://marketplace.visualstudio.com/items?itemName=Continue.continue) or from VSCode Sidebar (Ctrl+Shift+X).
+
+
+
+### Step 5. Configure your Continue.dev extension
+
+Open the `config.json` file in the Continue.dev extension and take a look at two keys: `models` and `tabAutocompleteModel`, following the example below.
+
+```json
+{
+ "models": [
+ {
+ "model": "AUTODETECT",
+ "title": "Ollama",
+ "completionOptions": {},
+ "apiBase": "http://localhost:11434",
+ "provider": "ollama"
+ }
+ ],
+ "tabAutocompleteModel": {
+ "model": "deepseek-coder:6.7b-base",
+ "title": "deepseek-coder",
+ "completionOptions": {},
+ "apiBase": "http://localhost:11434",
+ "provider": "ollama"
+ },
+ ...
+}
+```
+
+Now, you can start using your own AI coding assistant. If you having issues with the extension, please check out [Continue.dev Troubleshooting](https://docs.continue.dev/troubleshooting) page.
+
+Here's an improved version of your conclusion with a more polished and engaging tone:
+
+---
+
+## Conclusion
+
+In this article, we've walked through the steps to install and configure the **Continue.dev** extension for VSCode, enabling you to integrate your own AI coding assistant seamlessly into your workflow. I hope this guide helps enhance your development experience.
+
+If you have any questions or feedback, feel free to drop a comment below—I'll do my best to respond promptly.
+
+For further details and updates, be sure to explore the [Continue.dev documentation](https://docs.continue.dev/).
+
+Finally, a special thanks to the **Ollama**, the **Continue.dev team**, and the entire open-source community for their valuable contributions in making this tool available to all.
diff --git a/new-site/src/content/blog/python-313-free-threaded.mdx b/new-site/src/content/blog/python-313-free-threaded.mdx
new file mode 100644
index 0000000..9e551d7
--- /dev/null
+++ b/new-site/src/content/blog/python-313-free-threaded.mdx
@@ -0,0 +1,140 @@
+---
+title: "Free Threaded Mode in Python3.13 (GIL disabled)"
+description: "Python 3.13 just release recently, with an amazing new feature called 'Free threaded mode'. This is a great improvement for the performance of your code when you are using threads."
+date: 2024-10-10
+author: "Hieu Nguyen"
+language: "en"
+category: "Python"
+tags: ["Python", "GIL"]
+image: "/images/blog/python-313.png"
+draft: false
+---
+
+Python 3.13 just release recently, with an amazing new feature called "Free threaded mode". This is a great improvement for the performance of your code when you are using threads. This article shows how to enable this feature (not enabled by default) and shows "free threaded mode" impact on the performance of your code.
+
+## Install Free Threaded Python
+
+### Windows & MacOS users
+
+For Windows and MacOS users, just download the latest installer from [Python website](https://www.python.org/downloads/). When you install Python, there is a checkbox to enable "Free threaded mode" when you select "Customize installation" option.
+
+
+
+### Ubuntu users
+
+For Ubuntu users, you can enable this feature by running the following command in your terminal:
+
+```bash
+sudo add-apt-repository ppa:deadsnakes
+sudo apt-get update
+sudo apt-get install python3.13-nogil
+```
+
+### Verify Free Threaded Mode is enabled
+
+After installing the package, you can run your code with `python3.13` (original) and `python3.13-nogil` or `python3.13t` (free threaded Python).
+
+Check out this [article](https://py-free-threading.github.io/installing_cpython/#linux-distros) for more details on how to install Python 3.13 experimental on Linux distros.
+
+To verify your Python has "Free threaded mode" enable, you can use the following command:
+
+```bash
+python3.13t -VV
+Python 3.13.0 experimental free-threading build (main, Oct 8 2024, 08:51:28) [GCC 11.4.0]
+```
+
+
+## Free Threaded Mode Performance
+
+### Experiment Setup
+
+Let's see the impact of free threaded mode on a simple code below:
+- I have a function `worker` that does some computation and returns the sum of numbers from 0 to 10 million.
+- I have the "Test 1" to run the `worker` function 5 times, sequentially.
+- I have the "Test 2" to run the `worker` function in parallel using multiple threads, with number of threads is 5.
+- I do measure the execution time of both tests.
+
+```py
+import sys
+import threading
+import time
+
+print("Python version : ", sys.version)
+
+def worker():
+ sum = 0
+ for i in range(10000000):
+ sum += i
+
+
+n_worker = 5
+# Single thread
+
+start = time.perf_counter()
+for i in range(n_worker):
+ worker()
+print("Single Thread: ", time.perf_counter() - start, "seconds")
+
+
+# Multi thread
+start = time.perf_counter()
+threads = []
+for i in range(n_worker):
+ t = threading.Thread(target=worker)
+
+ threads.append(t)
+ t.start()
+
+for t in threads:
+ t.join()
+print("Multi Thread: ", time.perf_counter() - start, "seconds")
+
+```
+
+Later, I will run this code with normal Python (`python3.13` binary) and free threaded Python (`pypy3.13t` binary).
+
+### Results
+
+First, run the test with `python3.13`:
+```
+python3.13 gil_test.py
+Python version : 3.13.0 (main, Oct 8 2024, 08:51:28) [GCC 11.4.0]
+Single Thread: 1.4370562601834536 seconds
+Multi Thread: 1.3681392602156848 seconds
+```
+
+Then, run the test with `pypy3.13t`:
+```
+python3.13t gil_test.py
+Python version : 3.13.0 experimental free-threading build (main, Oct 8 2024, 08:51:28) [GCC 11.4.0]
+Single Thread: 1.862126287072897 seconds
+Multi Thread: 0.3931183419190347 seconds
+```
+
+I also trying with `python3.11`:
+```
+python3.11 gil_test.py
+Python version : 3.11.3 (main, Apr 25 2023, 16:40:23) [GCC 11.3.0]
+Single Thread: 1.753435204969719 seconds
+Multi Thread: 1.457715731114149 seconds
+```
+
+### Result Analysis
+
+Python default has GIL (Global Interpreter Lock) locking mechanism, making multi-threaded actually not parallel. You can see the time processing of single thread is similar to multi thread.
+
+With `python3.11t` (free threaded mode), multi threaded performance is much faster than single threaded. So, multi threading now actually parallel.
+
+:::info
+
+But, do you see Single Thread test in `python3.13t` a bit slower than `pypy3.13`?
+
+> I don't really understand why, so let me know if you have any explanation.
+
+:::
+
+## Conclusion
+
+I think it is good to use multi threading in python for parallel processing. But, without GIL locking mechanism, it requires developer to be careful about the "thread safety", ie. sharing data between threads.
+
+Also, we need to wait for libraries and packages update to fully support free threaded mode. That's one of the reason why this "free threaded mode" is not enabled by default for now. But, I think it will be a good feature in future.
diff --git a/new-site/src/content/blog/python-decorator.mdx b/new-site/src/content/blog/python-decorator.mdx
new file mode 100644
index 0000000..1509a1d
--- /dev/null
+++ b/new-site/src/content/blog/python-decorator.mdx
@@ -0,0 +1,400 @@
+---
+title: "Python Decorator"
+description: "Python Decorator là một công cụ mạnh mẽ giúp chúng ta mở rộng chức năng của một hàm mà không cần thay đổi nội dung bên trong hàm đó."
+date: 2024-03-09
+author: "Hieu Nguyen"
+language: "vi"
+category: "Python"
+tags: ["python", "decorator", "tutorial"]
+image: "/images/blog/python-decorator.jpeg"
+draft: false
+---
+
+Python decorator là gì? decorator có nghĩa nôm na là "đồ đem đi trang trí". Quả thực vậy, decorator trong Python sinh ra là để đem đi trang trí - phụ họa thêm chức năng cho đối tượng (function, class) mà không can thiệp sửa đổi đối tượng đó.
+
+:::info
+
+TL;DR
+
+Bạn có thể cuộn xuống [mục 4](#các-ứng-dụng-của-python-decorator) để xem ngay và luôn ứng dụng thực thế của python decorator
+
+:::
+
+Quan sát ảnh phía dưới, nếu bạn đã biết về Python thì `@app.route ...` chắc hẳn bạn đã thấy hoặc dùng không ít lần. Nó chính là 1 decorator được dùng để chỉ định `route` cho hàm ngay phía dưới nó.
+
+
+
+Mục đích chính của việc sử dụng decorator là để áp dụng các nguyên tắc "DRY" (Don't Repeat Yourself - Không viết lại mã code) và "SoC" (Separation of Concerns - Phân chia trách nhiệm), cho phép chúng ta tách rời các phần mã không thuộc về logic chính của hàm như xác thực, logging, đo thời gian thực thi, xử lý ngoại lệ,... Decorator giúp chúng ta làm được điều này mà không cần sửa đổi nội dung bên trong đối tượng gốc.
+
+## Cú pháp của Python decorator
+
+Cú pháp của Python decorator rất đơn giản và dễ hiểu. Để sử dụng một decorator đã có cho một hàm bất kỳ, chúng ta chỉ cần sử dụng cú pháp `@Here are some images of myself generated by Flux.1-dev LoRA
+
+
+
+
+
+
+ {title}
+ +{description}
+ +
+
+
+ {tags.length > 0 && (
+
+ 
+ {author}
+
+ •
+
+ {updated && (
+ <>
+ •
+ Updated: {formatDate(updated)}
+
+ )}
+ •
+ {readingTime} min read
+
+ {author}
+
+ {tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 404
+
+
+ Page Not Found
++ Looks like you've ventured into uncharted waters of the AI ocean 🌊 +
+ + +
+
+
+
+ Looking for something specific?
+
+
+
+
+
+
+ 🏠
+
+
+
+ Home
+Back to homepage
+ + + + 📝 +Blog
+Read articles
+ + + + 🚀 +Projects
+View work
+ ++ Still lost? Get in touch and I'll help you find what you need. +
+
+
+
+
+
+
+
+ ✍️ {t.blog.title}
++ {t.blog.subtitle} +
+
+
+ {languages.map((lang) => {
+ const count = sortedPosts.filter((p) => p.data.language === lang).length;
+ return (
+
+ );
+ })}
+ {categories.map((cat) => {
+ const count = sortedPosts.filter((p) => p.data.category === cat).length;
+ return (
+
+ );
+ })}
+
+
+
+ {featuredPost && (
+
+
+ )}
+
+
+
+
+ 📌 {t.blog.featured}
+
+
+ + + {featuredPost.data.title} + +
++ {featuredPost.data.description} +
+
+
+ {featuredPost.data.language === 'vi' ? '🇻🇳 VI' : '🇺🇸 EN'}
+
+ {featuredPost.data.category}
+
+ {new Date(featuredPost.data.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+
+
+ {readingTime(featuredPost.body)} {t.blog.minRead}
+
+
+
+ {t.blog.readArticle}
+
+
+
+
+
+ {t.blog.allPosts} ({sortedPosts.length})
+
+ {sortedPosts.map((post) => (
+
+
+
+
+
+ ))}
+
+
+ {t.blog.emptyState}
+ +
+
+
+
+
+
+
+ {t.contact.title}
++ {t.contact.subtitle} +
+
+
+
+
+
+
+
+
+
+
+ {t.contact.getInTouch}
+ + {Object.entries(SOCIAL_LINKS).map(([key, social]) => ( + +
+
+
+
+
+
+ ))}
+ + {social.label} +
++ {key === 'email' && SITE.email} + {key === 'linkedin' && '@behitek'} + {key === 'github' && '@behitek (355 followers)'} + {key === 'twitter' && '@behitek_'} +
+
+
+
+
+
+
+
+ {t.contact.quickInfo.title}
+
+
+
+ 📍
+
+
+
+ {t.contact.quickInfo.location}
+{t.contact.quickInfo.locationValue}
+
+ 💼
+
+
+
+ {t.contact.quickInfo.role}
+{t.contact.quickInfo.roleValue}
+
+ 🎓
+
+
+
+ {t.contact.quickInfo.education}
+{t.contact.quickInfo.educationValue}
+
+
+
+
+ {t.contact.interests.title}
+
+ {t.contact.interests.aiml}
+ {t.contact.interests.nlp}
+ {t.contact.interests.rag}
+ {t.contact.interests.llms}
+ {t.contact.interests.python}
+ {t.contact.interests.ir}
+ {t.contact.interests.teaching}
+
+ {t.contact.interests.selfHosting}
+
+
+
+
+ {t.contact.availability.title}
++ {t.contact.availability.text} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t.home.greeting}
+
+
+
+
+
+
+ {t.home.welcome}
+
+
+
+
+ {t.home.greeting}
+ {t.home.name}
+
+
+ + {t.home.role} +
+ ++ {t.home.tagline} +
+ + + + + +
+ {Object.entries(SOCIAL_LINKS).map(([_key, social]) => (
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ {t.home.status}
+
+
+
+
+
+ {STATS.followers}
+{t.home.stats.followers}
+
+
+ {STATS.repositories}
+{t.home.stats.repositories}
+
+
+ 5+
+{t.home.stats.yearsExp}
+
+
+
+
+
+
+
+
+ {t.home.about.title}
++ {t.home.about.subtitle} +
+
+
+
+
+
+
+
+
+
+ 👨💻
+
+
+ {t.home.about.greeting}
+
+
+ + {t.home.about.bio1} +
++ {t.home.about.bio2} +
++ 🎓 {t.home.about.bio3.replace('{degree}', EDUCATION.degree).replace('{school}', EDUCATION.school)} +
++ 💡 {t.home.about.bio4} +
+
+
+
+
+ 🎓
+ {t.home.education.title}
+{EDUCATION.degree}
+{EDUCATION.school}
+{EDUCATION.country}
+
+
+
+
+ 🛠️
+ {t.home.techStack.title}
+
+ {Object.entries(TECH_STACK).map(([category, skills]) => (
+
+
+
+ ))}
+ + {category} +
+
+ {skills.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+
+
+ {t.home.featuredProjects.title}
++ {t.home.featuredProjects.subtitle} +
+
+ {featuredProjects.map((project) => (
+
+
+
+
+
+
+
+
+ {t.home.latestArticles.title}
++ {t.home.latestArticles.subtitle} +
+
+ {recentPosts.map((post) => (
+
+
+
+
+
+
+
+
+
+ + {t.home.cta2.title} +
++ {t.home.cta2.subtitle} +
+ +
+
+
+
+
+
+
+ 🚀 {t.projects.title}
++ {t.projects.subtitle} +
+
+
+ {projectsByCategory.map((group) => (
+
+ ))}
+
+
+
+
+ {sortedProjects.map((project) => (
+
+
+
+
+
+
+
+
+ ))}
+
+
+ {t.projects.emptyState}
+ +
+
+
+
+
+
+
+ ✍️ {t.blog.title}
++ {t.blog.subtitle} +
+
+
+ {languages.map((lang) => {
+ const count = sortedPosts.filter((p) => p.data.language === lang).length;
+ return (
+
+ );
+ })}
+ {categories.map((cat) => {
+ const count = sortedPosts.filter((p) => p.data.category === cat).length;
+ return (
+
+ );
+ })}
+
+
+
+ {featuredPost && (
+
+
+ )}
+
+
+
+
+ 📌 {t.blog.featured}
+
+
+ + + {featuredPost.data.title} + +
++ {featuredPost.data.description} +
+
+
+ {featuredPost.data.language === 'vi' ? '🇻🇳 VI' : '🇺🇸 EN'}
+
+ {featuredPost.data.category}
+
+ {new Date(featuredPost.data.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+
+
+ {readingTime(featuredPost.body)} {t.blog.minRead}
+
+
+
+ {t.blog.readArticle}
+
+
+
+
+
+ {t.blog.allPosts} ({sortedPosts.length})
+
+ {sortedPosts.map((post) => (
+
+
+
+
+
+ ))}
+
+
+ {t.blog.emptyState}
+ +
+
+
+
+
+
+
+ {t.contact.title}
++ {t.contact.subtitle} +
+
+
+
+
+
+
+
+
+
+
+ {t.contact.getInTouch}
+ + {Object.entries(SOCIAL_LINKS).map(([key, social]) => ( + +
+
+
+
+
+
+ ))}
+ + {social.label} +
++ {key === 'email' && SITE.email} + {key === 'linkedin' && '@behitek'} + {key === 'github' && '@behitek (355 followers)'} + {key === 'twitter' && '@behitek_'} +
+
+
+
+
+
+
+
+ {t.contact.quickInfo.title}
+
+
+
+ 📍
+
+
+
+ {t.contact.quickInfo.location}
+{t.contact.quickInfo.locationValue}
+
+ 💼
+
+
+
+ {t.contact.quickInfo.role}
+{t.contact.quickInfo.roleValue}
+
+ 🎓
+
+
+
+ {t.contact.quickInfo.education}
+{t.contact.quickInfo.educationValue}
+
+
+
+
+ {t.contact.interests.title}
+
+ {t.contact.interests.aiml}
+ {t.contact.interests.nlp}
+ {t.contact.interests.rag}
+ {t.contact.interests.llms}
+ {t.contact.interests.python}
+ {t.contact.interests.ir}
+ {t.contact.interests.teaching}
+
+ {t.contact.interests.selfHosting}
+
+
+
+
+ {t.contact.availability.title}
++ {t.contact.availability.text} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t.home.greeting}
+
+
+
+
+
+
+ {t.home.welcome}
+
+
+
+
+ {t.home.greeting}
+ {t.home.name}
+
+
+ + {t.home.role} +
+ ++ {t.home.tagline} +
+ + + + + +
+ {Object.entries(SOCIAL_LINKS).map(([_key, social]) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t.home.status}
+
+
+
+
+
+ {STATS.followers}
+{t.home.stats.followers}
+
+
+ {STATS.repositories}
+{t.home.stats.repositories}
+
+
+ 5+
+{t.home.stats.yearsExp}
+
+
+
+
+
+
+
+
+ {t.home.about.title}
++ {t.home.about.subtitle} +
+
+
+
+
+
+
+
+
+
+ 👨💻
+
+
+ {t.home.about.greeting}
+
+
+ + {t.home.about.bio1} +
++ {t.home.about.bio2} +
++ 🎓 {t.home.about.bio3.replace('{degree}', EDUCATION.degree).replace('{school}', EDUCATION.school)} +
++ 💡 {t.home.about.bio4} +
+
+
+
+
+ 🎓
+ {t.home.education.title}
+{EDUCATION.degree}
+{EDUCATION.school}
+{EDUCATION.country}
+
+
+
+
+ 🛠️
+ {t.home.techStack.title}
+
+ {Object.entries(TECH_STACK).map(([category, skills]) => (
+
+
+
+ ))}
+ + {category} +
+
+ {skills.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+
+
+ {t.home.featuredProjects.title}
++ {t.home.featuredProjects.subtitle} +
+
+ {featuredProjects.map((project) => (
+
+
+
+
+
+
+
+
+ {t.home.latestArticles.title}
++ {t.home.latestArticles.subtitle} +
+
+ {recentPosts.map((post) => (
+
+
+
+
+
+
+
+
+
+ + {t.home.cta2.title} +
++ {t.home.cta2.subtitle} +
+ +
+
+
+
+
+
+
+ 🚀 {t.projects.title}
++ {t.projects.subtitle} +
+
+
+ {projectsByCategory.map((group) => (
+
+ ))}
+
+
+
+
+ {sortedProjects.map((project) => (
+
+
+
+
+
+
+
+
+ ))}
+
+
+ {t.projects.emptyState}
+ +