Language Model: Fine-tuned Devstral weights for superior coding performance
Vision Model: Mistral-Small vision encoder and multimodal projector
How It Was Created
This model was created by surgically transplanting the language model weights from Devstral-Small-2507 into the Mistral-Small-3.2-24B-Instruct-2506 architecture while preserving all vision components:
Started with Mistral-Small-3.2-24B-Instruct-2506 (complete multimodal model)
Replaced only the core language model weights with Devstral-Small-2507's fine-tuned weights
Visual Software Engineering: Analyze UI screenshots, mockups, and designs to generate implementation code
Code Review with Visual Context: Review code changes alongside their visual output
Debugging Visual Issues: Debug rendering problems by analyzing screenshots
Design-to-Code: Convert visual designs directly into code
Documentation with Visual Examples: Generate documentation that references visual elements
Example Applications
Building UI components from screenshots
Debugging CSS/styling issues with visual feedback
Converting Figma/design mockups to code
Analyzing and reproducing visual bugs
Creating visual test cases
Usage
With OpenHands
The model is optimized for use with OpenHands for agentic coding tasks:
bash
1# Using vLLM2vllm serve cognitivecomputations/Devstral-Vision-Small-2507 \3 --tokenizer_mode mistral \4 --config_format mistral \5 --load_format mistral \6 --tensor-parallel-size 278# Configure OpenHands to use the model9# Set Custom Model: openai/cognitivecomputations/Devstral-Vision-Small-250710# Set Base URL: http://localhost:8000/v1
With Transformers
python
1import torch
2from transformers import AutoModelForCausalLM, AutoProcessor
3from PIL import Image
45model_id ="cognitivecomputations/Devstral-Vision-Small-2507"67model = AutoModelForCausalLM.from_pretrained(8 model_id,9 torch_dtype=torch.bfloat16,10 device_map="auto"11)12processor = AutoProcessor.from_pretrained(model_id)1314# Load an image15image = Image.open("screenshot.png")1617# Create a prompt18prompt ="Analyze this UI screenshot and generate React code to reproduce it."1920# Process inputs21inputs = processor(22 text=prompt,23 images=image,24 return_tensors="pt"25).to(model.device)2627# Generate28outputs = model.generate(29**inputs,30 max_new_tokens=2000,31 temperature=0.732)3334response = processor.decode(outputs[0], skip_special_tokens=True)35print(response)
image/png
image/png
Performance Expectations
Coding Performance
Inherits Devstral's exceptional performance on coding tasks:
53.6% on SWE-Bench Verified (when used with OpenHands)
Superior performance on multi-file editing and codebase exploration
Excellent tool use and agentic behavior
Vision Performance
Maintains Mistral-Small's vision capabilities:
Strong understanding of UI elements and layouts
Accurate interpretation of charts, diagrams, and visual documentation
Reliable screenshot analysis for debugging
Hardware Requirements
GPU Memory: ~48GB for full precision, ~24GB with 4-bit quantization
Recommended: 2x RTX 4090 or better for optimal performance
Minimum: Single GPU with 24GB VRAM using quantization
Limitations
Vision capabilities are limited to what Mistral-Small-3.2 supports
Not specifically fine-tuned on vision-to-code tasks (uses Devstral's text-only fine-tuning)
Large model size may be prohibitive for some deployment scenarios
Best performance achieved when used with appropriate scaffolding (OpenHands, Cline, etc.)
Ethical Considerations
This model inherits both the capabilities and limitations of its parent models. Users should:
Review generated code for security vulnerabilities
Verify visual interpretations are accurate
Be aware of potential biases in code generation
Use appropriate safety measures in production deployments