```
The component queries these DOM elements and attaches an `oninput` event handler (lines 662-668) to synchronize the slider's position with both the internal `referenceStrength` variable and the visible percentage label:
```javascript
// Located in ImageStudio.js lines 662-668
const refStrengthSlider = advancedPanel.querySelector('#reference-strength-slider');
const refStrengthValue = advancedPanel.querySelector('#reference-strength-value');
if (refStrengthSlider && refStrengthValue) {
refStrengthSlider.oninput = (e) => {
referenceStrength = parseInt(e.target.value); // store numeric value
refStrengthValue.textContent = referenceStrength + '%'; // update label
};
}
```
### Parameter Semantics and Variable Handling
The `referenceStrength` variable defaults to **50** and persists in the component's state until a generation request is triggered. When the user presses **Generate**, the frontend divides this value by 100 to convert it to the decimal range expected by diffusion backends:
```javascript
// Request payload construction (simplified)
const payload = {
model: selectedModelId,
prompt: userPrompt,
seed: seed,
reference_image: encodedReference, // base64 or blob
strength: referenceStrength / 100 // convert to 0-1 for the backend
};
await fetch('/api/generate', { method: 'POST', body: JSON.stringify(payload) });
```
## Backend Integration and Inference Impact
According to the Open-Generative-AI source code, the `strength` parameter received by the server-side endpoint (`app/api/agents/[[...path]]/route.js`) determines the interpolation weight between two latent representations:
1. The latent encoding of the supplied **reference image**.
2. The latent generated from the **text prompt** and random noise.
Diffusion-based I2I backends interpret this weight as follows:
- **High strength values** (closer to 1.0) force the sampler to stay near the reference image's latent space, preserving structural elements, colors, and textures.
- **Low strength values** (closer to 0.0) allow the denoising process to drift further from the reference, giving the prompt dominion over the final composition.
The server forwards this parameter to the model inference service, where it modulates how many denoising steps start from the reference latent versus pure noise.
## Practical Usage Workflow
To effectively use the reference strength slider in the Open-Generative-AI studio:
1. **Load a reference image** into the studio's dropzone or file picker.
2. **Select an I2I-compatible model** (e.g., "Stable Diffusion Img2Img") from the model selector—this triggers the Advanced panel to reveal the slider.
3. **Adjust the Reference Strength slider** to the desired preservation level (0-100%).
4. **Enter your prompt** and press **Generate**—the frontend sends `strength: