feat: add manual numeric inputs for fuzzy modeling and update env config
- Implement synchronized numeric inputs alongside sliders in Step 2. - Enable real-time graph updates via input arrows and manual typing. - Add strict clamping and validation for fuzzy parameter constraints. - Refactor environment variables to use .env.local pattern. - Add .env.example files for frontend and backend documentation.
This commit is contained in:
Alexis
+5
-2
@@ -3,8 +3,11 @@ __pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# Variables de entorno
|
||||
|
||||
# Variables de entorno (solo ignoramos las locales/sobre-escrituras)
|
||||
# Mantenemos .env y .env.example versionados para compartir la configuración
|
||||
# de producción y el esqueleto de variables. Nunca subimos .env.local.
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Configuraciones del editor
|
||||
.vscode/
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
# Backend environment variables (FastAPI)
|
||||
# ----------------------------------------
|
||||
# Copia este archivo como `.env` para desarrollo local y rellena los valores.
|
||||
#
|
||||
# docker-compose levanta el backend con `env_file: backend/.env`.
|
||||
|
||||
# Google OAuth (https://console.cloud.google.com/apis/credentials)
|
||||
# IMPORTANTE: la REDIRECT_URI es la URL a la que Google devuelve al usuario,
|
||||
# por tanto debe coincidir con la URL pública del backend tal como la ve el
|
||||
# navegador. Usando docker-compose, el backend está expuesto en el host en
|
||||
# el puerto 8070, así que:
|
||||
# http://localhost:8070/api/auth/google/callback
|
||||
# Si ejecutas el backend fuera de Docker en el puerto 8000, usa:
|
||||
# http://localhost:8000/api/auth/google/callback
|
||||
# Esta URI debe estar registrada también en la consola de Google Cloud.
|
||||
GOOGLE_CLIENT_ID=tu-client-id.apps.googleusercontent.com
|
||||
GOOGLE_CLIENT_SECRET=tu-client-secret
|
||||
GOOGLE_REDIRECT_URI=http://localhost:8070/api/auth/google/callback
|
||||
|
||||
# Clave para firmar los JWT (usa algo largo y aleatorio en producción)
|
||||
SECRET_KEY=cambia-esta-clave-en-produccion
|
||||
@@ -0,0 +1,22 @@
|
||||
# Frontend environment variables (Vite)
|
||||
# --------------------------------------
|
||||
# Copia este archivo como `.env.local` para desarrollo local.
|
||||
# Vite carga automáticamente `.env.local` encima de `.env`, así que
|
||||
# los valores aquí definidos sobrescribirán los de producción en dev.
|
||||
#
|
||||
# cp .env.example .env.local
|
||||
#
|
||||
# IMPORTANTE: Sólo las variables con prefijo VITE_ se exponen al cliente.
|
||||
|
||||
# URL base de la API del backend (la ve el NAVEGADOR, no el contenedor).
|
||||
#
|
||||
# - Dev con docker-compose (recomendado): el backend está expuesto en el
|
||||
# puerto 8070 del host (mapea 8070 -> 8000 del contenedor).
|
||||
# VITE_API_URL=http://localhost:8070/api
|
||||
#
|
||||
# - Backend ejecutado fuera de Docker (uvicorn --port 8000):
|
||||
# VITE_API_URL=http://localhost:8000/api
|
||||
#
|
||||
# - Producción (ya definido en .env):
|
||||
# VITE_API_URL=http://sinbad2.ujaen.es:8070/api
|
||||
VITE_API_URL=http://localhost:8070/api
|
||||
@@ -12,6 +12,11 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Variables de entorno locales de Vite
|
||||
# (.env y .env.example sí se versionan)
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
|
||||
@@ -1,4 +1,105 @@
|
||||
export default function Controls({
|
||||
import { useState } from 'react';
|
||||
|
||||
function SliderInput({ label, value, min, max, step, color, onChange, decimals = 3 }) {
|
||||
const [draft, setDraft] = useState(null);
|
||||
|
||||
const numericValue = Number(value);
|
||||
const displayValue = draft !== null ? draft : numericValue.toFixed(decimals);
|
||||
|
||||
const commitDraft = () => {
|
||||
if (draft === null) return;
|
||||
|
||||
const trimmed = draft.trim();
|
||||
if (trimmed === '' || trimmed === '-' || trimmed === '.' || trimmed === '-.') {
|
||||
setDraft(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const parsed = parseFloat(trimmed);
|
||||
if (Number.isNaN(parsed)) {
|
||||
setDraft(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const clamped = Math.min(max, Math.max(min, parsed));
|
||||
onChange(clamped);
|
||||
setDraft(null);
|
||||
};
|
||||
|
||||
const handleNumberChange = (e) => {
|
||||
const raw = e.target.value;
|
||||
|
||||
if (raw === '') {
|
||||
setDraft('');
|
||||
return;
|
||||
}
|
||||
|
||||
const num = e.target.valueAsNumber;
|
||||
|
||||
if (Number.isNaN(num)) {
|
||||
setDraft(raw);
|
||||
return;
|
||||
}
|
||||
|
||||
if (num > max) {
|
||||
setDraft(max.toFixed(decimals));
|
||||
onChange(max);
|
||||
return;
|
||||
}
|
||||
|
||||
if (num < min) {
|
||||
setDraft(raw);
|
||||
return;
|
||||
}
|
||||
|
||||
setDraft(raw);
|
||||
onChange(num);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
} else if (e.key === 'Escape') {
|
||||
setDraft(null);
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-slate-600 mb-1">{label}</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={numericValue}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="flex-1 cursor-pointer h-1.5"
|
||||
style={{ accentColor: color }}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={displayValue}
|
||||
onChange={handleNumberChange}
|
||||
onBlur={commitDraft}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="w-20 px-2 py-1 text-xs font-semibold text-slate-700 bg-white border border-slate-200 rounded-md text-center shadow-sm focus:outline-none focus:ring-2 focus:border-transparent transition-shadow tabular-nums"
|
||||
style={{ '--tw-ring-color': color, borderColor: draft !== null ? color : undefined }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const MF_STEP = 0.001;
|
||||
const snapToMfStep = (v) => Math.round(Number(v) / MF_STEP) * MF_STEP;
|
||||
|
||||
export default function Controls({
|
||||
selectedTerm, currentMf, selectedColor, baseScale, mfDefinitions, updateCurrentMf,
|
||||
subscales, onOpenSubscale
|
||||
}) {
|
||||
@@ -6,38 +107,50 @@ export default function Controls({
|
||||
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
const selectedIndex = scaleKeys.indexOf(selectedTerm);
|
||||
|
||||
let absoluteMin = 0, absoluteMax = 1;
|
||||
if (selectedIndex > 0) absoluteMin = mfDefinitions[scaleKeys[selectedIndex - 1]].coreEnd;
|
||||
if (selectedIndex < scaleKeys.length - 1) absoluteMax = mfDefinitions[scaleKeys[selectedIndex + 1]].coreStart;
|
||||
|
||||
const prevTerm = selectedIndex > 0 ? mfDefinitions[scaleKeys[selectedIndex - 1]] : null;
|
||||
const nextTerm = selectedIndex < scaleKeys.length - 1 ? mfDefinitions[scaleKeys[selectedIndex + 1]] : null;
|
||||
|
||||
const anchor = snapToMfStep(baseScale[selectedTerm]);
|
||||
|
||||
const bounds = {
|
||||
supportStart: { min: snapToMfStep(prevTerm?.coreEnd ?? 0), max: anchor },
|
||||
coreStart: { min: snapToMfStep(prevTerm?.supportEnd ?? 0), max: anchor },
|
||||
coreEnd: { min: anchor, max: snapToMfStep(nextTerm?.supportStart ?? 1) },
|
||||
supportEnd: { min: anchor, max: snapToMfStep(nextTerm?.coreStart ?? 1) },
|
||||
};
|
||||
|
||||
const leftSubscale = subscales?.[selectedTerm]?.left;
|
||||
const rightSubscale = subscales?.[selectedTerm]?.right;
|
||||
|
||||
const commonProps = { step: 0.001, color: selectedColor };
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-md relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1.5" style={{ backgroundColor: selectedColor }}></div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||
Ajustando: <span style={{ color: selectedColor }}>"{selectedTerm}"</span>
|
||||
</h3>
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4 bg-slate-50 p-4 rounded-xl border border-slate-100">
|
||||
<div>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Inicio del Soporte (Punto inferior)</span><span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={absoluteMin} max={absoluteMax} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Inicio del Núcleo (Punto superior)</span><span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={absoluteMin} max={absoluteMax} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor }} />
|
||||
</div>
|
||||
|
||||
<SliderInput
|
||||
{...commonProps}
|
||||
{...bounds.supportStart}
|
||||
label="Inicio del Soporte (Punto inferior)"
|
||||
value={currentMf.supportStart}
|
||||
onChange={(v) => updateCurrentMf('supportStart', v)}
|
||||
/>
|
||||
<SliderInput
|
||||
{...commonProps}
|
||||
{...bounds.coreStart}
|
||||
label="Inicio del Núcleo (Punto superior)"
|
||||
value={currentMf.coreStart}
|
||||
onChange={(v) => updateCurrentMf('coreStart', v)}
|
||||
/>
|
||||
|
||||
<div className="pt-2 border-t border-slate-200 flex justify-end">
|
||||
<button
|
||||
<button
|
||||
onClick={() => onOpenSubscale(selectedTerm, 'left', leftSubscale)}
|
||||
className={`text-sm font-bold px-4 py-2 rounded-lg transition-all border ${leftSubscale ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'}`}
|
||||
>
|
||||
@@ -47,21 +160,23 @@ export default function Controls({
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 bg-slate-50 p-4 rounded-xl border border-slate-100">
|
||||
<div>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Fin del Soporte (Punto inferior)</span><span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={absoluteMin} max={absoluteMax} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Fin del Núcleo (Punto superior)</span><span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={absoluteMin} max={absoluteMax} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor }} />
|
||||
</div>
|
||||
<SliderInput
|
||||
{...commonProps}
|
||||
{...bounds.supportEnd}
|
||||
label="Fin del Soporte (Punto inferior)"
|
||||
value={currentMf.supportEnd}
|
||||
onChange={(v) => updateCurrentMf('supportEnd', v)}
|
||||
/>
|
||||
<SliderInput
|
||||
{...commonProps}
|
||||
{...bounds.coreEnd}
|
||||
label="Fin del Núcleo (Punto superior)"
|
||||
value={currentMf.coreEnd}
|
||||
onChange={(v) => updateCurrentMf('coreEnd', v)}
|
||||
/>
|
||||
|
||||
<div className="pt-2 border-t border-slate-200 flex justify-end">
|
||||
<button
|
||||
<button
|
||||
onClick={() => onOpenSubscale(selectedTerm, 'right', rightSubscale)}
|
||||
className={`text-sm font-bold px-4 py-2 rounded-lg transition-all border ${rightSubscale ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'}`}
|
||||
>
|
||||
@@ -72,4 +187,4 @@ export default function Controls({
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,15 @@ import SubscaleModal from '../components/editor/SubscaleModal';
|
||||
import { calculateValueFunction, buildFuzzyGraph, saveToHistory } from '../services/docService';
|
||||
import Step3FinalGraph from '../components/editor/Step3FinalGraph';
|
||||
|
||||
// Step de la rejilla numérica de los puntos de la función de pertenencia.
|
||||
// El <input type="number"> de Controls usa este mismo step (0.001), así que
|
||||
// guardamos SIEMPRE en este grid: evita que valores 4-decimales del backend
|
||||
// (p.ej. 0.3017) contaminen el estado, lo cual disparaba dos bugs en el UI:
|
||||
// · stepMismatch en hover ("los valores válidos más aproximados son…")
|
||||
// · flechas que no llegan al máximo (paraban en 0.9997 con max=1).
|
||||
const MF_STEP = 0.001;
|
||||
const snapToMfStep = (v) => Math.round(Number(v) / MF_STEP) * MF_STEP;
|
||||
|
||||
export default function DocEditor() {
|
||||
const [step, setStep] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -46,7 +55,10 @@ export default function DocEditor() {
|
||||
const baseResult = await calculateValueFunction(payloadBase);
|
||||
setBaseScale(baseResult.values);
|
||||
const initialMfs = {};
|
||||
Object.entries(baseResult.values).forEach(([name, value]) => { initialMfs[name] = { supportStart: value, coreStart: value, coreEnd: value, supportEnd: value }; });
|
||||
Object.entries(baseResult.values).forEach(([name, value]) => {
|
||||
const v = snapToMfStep(value);
|
||||
initialMfs[name] = { supportStart: v, coreStart: v, coreEnd: v, supportEnd: v };
|
||||
});
|
||||
setMfDefinitions(initialMfs);
|
||||
setSelectedTerm(Object.keys(baseResult.values)[0]);
|
||||
setStep(2);
|
||||
@@ -56,22 +68,24 @@ export default function DocEditor() {
|
||||
// MANEJADORES: FASE 2
|
||||
const updateCurrentMf = (field, value) => {
|
||||
if (!selectedTerm) return;
|
||||
let numValue = parseFloat(value);
|
||||
// Snap al grid de 3 decimales antes de hacer cualquier comparación,
|
||||
// para que el estado nunca guarde más precisión que la que muestra el input.
|
||||
let numValue = snapToMfStep(value);
|
||||
setMfDefinitions(prev => {
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
const selectedIndex = scaleKeys.indexOf(selectedTerm);
|
||||
let prevCoreEnd = 0, prevSupportEnd = 0, nextCoreStart = 1, nextSupportStart = 1;
|
||||
|
||||
if (selectedIndex > 0) {
|
||||
prevCoreEnd = prev[scaleKeys[selectedIndex - 1]].coreEnd;
|
||||
prevSupportEnd = prev[scaleKeys[selectedIndex - 1]].supportEnd;
|
||||
prevCoreEnd = snapToMfStep(prev[scaleKeys[selectedIndex - 1]].coreEnd);
|
||||
prevSupportEnd = snapToMfStep(prev[scaleKeys[selectedIndex - 1]].supportEnd);
|
||||
}
|
||||
if (selectedIndex < scaleKeys.length - 1) {
|
||||
nextCoreStart = prev[scaleKeys[selectedIndex + 1]].coreStart;
|
||||
nextSupportStart = prev[scaleKeys[selectedIndex + 1]].supportStart;
|
||||
nextCoreStart = snapToMfStep(prev[scaleKeys[selectedIndex + 1]].coreStart);
|
||||
nextSupportStart = snapToMfStep(prev[scaleKeys[selectedIndex + 1]].supportStart);
|
||||
}
|
||||
|
||||
const anchor = baseScale[selectedTerm];
|
||||
const anchor = snapToMfStep(baseScale[selectedTerm]);
|
||||
|
||||
if (field === 'supportStart' && numValue < prevCoreEnd) numValue = prevCoreEnd;
|
||||
if (field === 'coreStart' && numValue < prevSupportEnd) numValue = prevSupportEnd;
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { authService } from '../services/authService';
|
||||
import { API_BASE_URL } from '../config';
|
||||
import { FiEye, FiEyeOff } from 'react-icons/fi';
|
||||
|
||||
export default function Login() {
|
||||
@@ -66,7 +67,7 @@ export default function Login() {
|
||||
};
|
||||
|
||||
const handleGoogleLogin = () => {
|
||||
window.location.href = "http://localhost:8000/api/auth/google/login";
|
||||
window.location.href = `${API_BASE_URL}/auth/google/login`;
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user