readme update

README.md

@@ -1,3 +1,69 @@
 ---
 license: apache-2.0
----
+--- 
+We have open-sourced Flame-Waterfall-7B, a model built by connecting DeepSeek-Coder-7B-Instruct and the SigLIP vision encoder with a 2-layer MLP, and instruction-tuned on the Flame-Code-VLM/Flame-Waterfall-React dataset. 
+This model is released to showcase the value of the synthesized dataset. However, it is not intended for general-purpose tasks. Please use it with caution.
+
+
+### Generation
+
+The following is the sample code for inference.
+
+```python
+
+# pip install git+https://github.com/LLaVA-VL/LLaVA-NeXT.git
+# Replace the corresponding code files in the original repository with those in https://github.com/Flame-Code-VLM/Flame-Code-VLM/tree/main/model
+# export PYTHONPATH="/your_path_to_LLaVA-NeXT_repo:$PYTHONPATH"
+
+from llava.model.builder import load_pretrained_model
+from llava.mm_utils import process_images, tokenizer_image_token
+from llava.constants import DEFAULT_IMAGE_TOKEN
+
+from PIL import Image
+import torch
+import warnings
+
+warnings.filterwarnings("ignore")
+
+pretrained = "Flame-Code-VLM/flame_waterfall_7b"
+
+model_name = "flame"
+device = "cuda"
+device_map = "auto"
+llava_model_args = {
+    "multimodal": True,
+    "attn_implementation": None,
+}
+tokenizer, model, image_processor, max_length = load_pretrained_model(pretrained, None, model_name, device_map=device_map,**llava_model_args)
+model.config.tokenizer_padding_side = 'left'  # Use left padding for batch processing
+model.eval()
+
+url = "path_to_your_screenshot_image_file"
+image = Image.open(url) 
+image_tensor = process_images([image], image_processor, model.config)
+image_tensor = [_image.to(dtype=torch.float16, device=device) for _image in image_tensor]
+
+prompt = "Below is an image of the page to create. Generate React code and styles to replicate the design, including layout, typography, and styling. Format your response as follows:'// CSS\n[CSS/SCSS code]\n\n// [React Implementation (JS/TS/JSX/TSX)]\n[Component code]'.\n\n ### Input Image:\n{image}\n\n### Response:\n"
+
+input_ids = tokenizer_image_token(prompt, tokenizer, return_tensors='pt')
+input_ids = input_ids.unsqueeze(0)
+input_ids=input_ids.to(device)
+image_sizes = [image.size]
+modalities = ["image"] 
+
+cont = model.generate(
+    input_ids,
+    images=image_tensor,
+    image_sizes=image_sizes,
+    modalities=modalities,                   # Added this line with the modalities
+    do_sample=True,
+    num_beams=5, 
+    temperature=0.1,
+    max_new_tokens=4096,
+    top_p=0.95,
+    repetition_penalty=1.05
+)
+
+text_outputs = tokenizer.batch_decode(cont, skip_special_tokens=True)
+
+```