File size: 4,974 Bytes
5686111 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
import React, { useState } from 'react';
const AdvancedSettings = ({
similarityTemperature,
onTemperatureChange,
difficultyWeight,
onWeightChange
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const presets = [
{
name: 'Default',
temp: 0.2,
weight: 0.5,
description: 'Balanced settings (recommended)'
},
{
name: 'Focused',
temp: 0.1,
weight: 0.3,
description: 'Deterministic, similarity-based'
},
{
name: 'Varied',
temp: 0.7,
weight: 0.5,
description: 'More randomness and variety'
},
{
name: 'Challenging',
temp: 0.5,
weight: 0.7,
description: 'Respects difficulty levels more'
}
];
const applyPreset = (preset) => {
onTemperatureChange(preset.temp);
onWeightChange(preset.weight);
};
const getTemperatureDescription = (value) => {
if (value <= 0.3) return 'Deterministic (top similar words)';
if (value <= 0.6) return 'Balanced (good variety)';
if (value <= 1.0) return 'Random (surprising choices)';
return 'Very random (unpredictable)';
};
const getWeightDescription = (value) => {
if (value <= 0.2) return 'Similarity-focused';
if (value <= 0.4) return 'Slightly similarity-focused';
if (value <= 0.6) return 'Balanced';
if (value <= 0.8) return 'Slightly frequency-focused';
return 'Frequency-focused';
};
return (
<div className="advanced-settings">
<div
className="advanced-settings-header"
onClick={() => setIsExpanded(!isExpanded)}
>
<span className="settings-icon">⚙️</span>
<span className="settings-title">Advanced Settings</span>
<span className="expand-icon">{isExpanded ? '▼' : '▶'}</span>
</div>
{isExpanded && (
<div className="advanced-settings-content">
<div className="setting-group">
<label className="setting-label">
Word Selection Randomness
<span className="setting-value">{similarityTemperature.toFixed(1)}</span>
</label>
<div className="slider-container">
<input
type="range"
min="0.1"
max="2.0"
step="0.1"
value={similarityTemperature}
onChange={(e) => onTemperatureChange(parseFloat(e.target.value))}
className="slider"
/>
<div className="slider-labels">
<span>More focused</span>
<span>More variety</span>
</div>
</div>
<div className="setting-description">
{getTemperatureDescription(similarityTemperature)}
</div>
</div>
<div className="setting-group">
<label className="setting-label">
Difficulty Balance
<span className="setting-value">{difficultyWeight.toFixed(1)}</span>
</label>
<div className="slider-container">
<input
type="range"
min="0.0"
max="1.0"
step="0.1"
value={difficultyWeight}
onChange={(e) => onWeightChange(parseFloat(e.target.value))}
className="slider"
/>
<div className="slider-labels">
<span>Similarity</span>
<span>Frequency</span>
</div>
</div>
<div className="setting-description">
{getWeightDescription(difficultyWeight)}
</div>
</div>
<div className="presets-section">
<div className="presets-label">Quick Presets:</div>
<div className="presets-container">
{presets.map((preset, index) => (
<button
key={index}
onClick={() => applyPreset(preset)}
className={`preset-button ${
similarityTemperature === preset.temp && difficultyWeight === preset.weight
? 'active'
: ''
}`}
title={preset.description}
>
{preset.name}
</button>
))}
</div>
</div>
<div className="settings-info">
<div className="info-item">
<strong>Temperature:</strong> Controls how random word selection is. Lower values pick the most similar words, higher values add variety.
</div>
<div className="info-item">
<strong>Weight:</strong> Balances similarity vs word frequency. Lower focuses on semantic similarity, higher respects difficulty levels.
</div>
</div>
</div>
)}
</div>
);
};
export default AdvancedSettings; |