str:
+ """폴백: 텍스트 이니셜 SVG."""
+ initial = name[0].upper() if name else "?"
+ return (f'')
+
+
+class IconRequest(BaseModel):
+ description: str
+ color: str = "#003366"
+ size: int = 24
+ category: str = "custom"
+ save: bool = True
+
+
+class BatchRequest(BaseModel):
+ icons: list[IconRequest]
+
+
+@router.post("/generate", status_code=201)
+async def generate_icon(body: IconRequest, db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """텍스트 설명→SVG 아이콘 생성."""
+ # 내장 아이콘 확인
+ for builtin_name, builtin_svg in BUILTIN_ICONS.items():
+ if builtin_name in body.description.lower():
+ return {"icon_id": f"builtin-{builtin_name}", "name": builtin_name,
+ "svg_code": builtin_svg, "source": "builtin",
+ "download_url": f"/api/icon/builtin/{builtin_name}"}
+
+ svg = await _generate_svg(body.description, body.color, body.size)
+
+ if not body.save:
+ return {"svg_code": svg, "source": "generated"}
+
+ icon = GeneratedIcon(
+ name=body.description[:50], description=body.description,
+ svg_code=svg, category=body.category,
+ primary_color=body.color, size=body.size,
+ created_by=user.id, created_at=datetime.utcnow(),
+ )
+ db.add(icon); await db.commit(); await db.refresh(icon)
+
+ return {
+ "icon_id": icon.id, "name": icon.name, "svg_code": svg,
+ "source": "ai_generated", "model": TEXT_MODEL,
+ "download_url": f"/api/icon/{icon.id}/download",
+ }
+
+
+@router.post("/batch")
+async def batch_generate(body: BatchRequest, db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """여러 아이콘 일괄 생성."""
+ results = []
+ for req in body.icons[:10]: # 최대 10개
+ svg = await _generate_svg(req.description, req.color, req.size)
+ icon = GeneratedIcon(
+ name=req.description[:50], description=req.description,
+ svg_code=svg, category=req.category, primary_color=req.color, size=req.size,
+ created_by=user.id, created_at=datetime.utcnow(),
+ )
+ db.add(icon)
+ results.append({"description": req.description, "svg_preview": svg[:100] + "..."})
+ await db.commit()
+ return {"generated": len(results), "icons": results}
+
+
+@router.get("/library")
+async def icon_library(db: AsyncSession = Depends(get_db), user: User = Depends(get_current_user)):
+ # 내장 아이콘
+ builtins = [{"id": f"builtin-{k}", "name": k, "source": "builtin",
+ "download_url": f"/api/icon/builtin/{k}"} for k in BUILTIN_ICONS]
+ # 생성 아이콘
+ rows = await db.execute(
+ select(GeneratedIcon).order_by(desc(GeneratedIcon.created_at)).limit(50)
+ )
+ custom = [{"id": ic.id, "name": ic.name, "category": ic.category,
+ "source": "ai_generated", "download_url": f"/api/icon/{ic.id}/download"}
+ for ic in rows.scalars().all()]
+ return {"builtin": builtins, "custom": custom, "total": len(builtins) + len(custom)}
+
+
+@router.get("/builtin/{name}")
+async def get_builtin(name: str):
+ """내장 아이콘 SVG 반환."""
+ if name not in BUILTIN_ICONS:
+ raise HTTPException(404, f"내장 아이콘 '{name}' 없음")
+ return Response(content=BUILTIN_ICONS[name], media_type="image/svg+xml",
+ headers={"Content-Disposition": f'attachment; filename="{name}.svg"'})
+
+
+@router.get("/{icon_id}/download")
+async def download_icon(icon_id: int, db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ row = await db.execute(select(GeneratedIcon).where(GeneratedIcon.id == icon_id))
+ icon = row.scalar_one_or_none()
+ if not icon: raise HTTPException(404)
+ return Response(content=icon.svg_code, media_type="image/svg+xml",
+ headers={"Content-Disposition": f'attachment; filename="{icon.name}.svg"'})
+
+
+@router.post("/customize/{icon_id}")
+async def customize_icon(icon_id: int, color: str = "#003366", size: int = 24,
+ db: AsyncSession = Depends(get_db), user: User = Depends(get_current_user)):
+ """색상·크기 변경."""
+ row = await db.execute(select(GeneratedIcon).where(GeneratedIcon.id == icon_id))
+ icon = row.scalar_one_or_none()
+ if not icon: raise HTTPException(404)
+ customized = re.sub(r'fill="[^"]*"', f'fill="{color}"', icon.svg_code)
+ return {"svg_code": customized, "color": color, "size": size}
diff --git a/routers/smart_ux.py b/routers/smart_ux.py
new file mode 100644
index 0000000..96a4d4f
--- /dev/null
+++ b/routers/smart_ux.py
@@ -0,0 +1,221 @@
+"""
+GUARDiA 스마트 UX — 다음명령 제시 + 음성처리
+
+엔드포인트:
+ POST /api/ux/next-commands — Ollama 다음명령 3개 예측
+ GET /api/ux/quick-commands — 자주 쓰는 명령 목록
+ POST /api/ux/learn — 명령 사용 학습
+ GET /api/ux/suggestions — 컨텍스트 기반 추천
+ POST /api/ux/voice-process — 음성 텍스트→명령 매핑
+"""
+from __future__ import annotations
+import json, logging
+from datetime import datetime, timedelta
+from typing import List, Optional
+
+import httpx
+from fastapi import APIRouter, Depends
+from pydantic import BaseModel
+from sqlalchemy import select, desc, func
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from core.auth import get_current_user
+from database import get_db
+from models import User, CommandHistory
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/api/ux", tags=["스마트 UX"])
+OLLAMA_URL = "http://localhost:11434"
+TEXT_MODEL = "llama3"
+
+# GUARDiA 기본 명령어 (빠른 접근용)
+DEFAULT_COMMANDS = [
+ "/sr create", "/server status", "/deploy",
+ "/incident create", "/dashboard", "/kb search",
+ "/cmdb server", "/assign me", "/sr list",
+ "/server check all", "/alert list", "/report generate",
+]
+
+# 음성 명령어 매핑 (한국어 → ITSM 명령)
+VOICE_COMMAND_MAP = {
+ "서버 상태": "/server status", "서버 확인": "/server status",
+ "SR 만들어": "/sr create", "서비스 요청": "/sr create",
+ "배포 시작": "/deploy", "배포해줘": "/deploy",
+ "장애 보고": "/incident create", "인시던트": "/incident create",
+ "대시보드": "/dashboard", "현황 보기": "/dashboard",
+ "담당자 배정": "/assign", "KB 검색": "/kb search",
+ "보고서": "/report generate", "리포트": "/report generate",
+ "경보 목록": "/alert list", "알림 확인": "/alert list",
+}
+
+
+class NextCommandIn(BaseModel):
+ recent_messages: List[str] = []
+ context: str = "" # 현재 방/작업 컨텍스트
+ user_role: str = ""
+
+
+class LearnIn(BaseModel):
+ command: str
+ room: str = "general"
+ success: bool = True
+
+
+class VoiceIn(BaseModel):
+ text: str # 음성→텍스트 변환 결과
+ context: str = ""
+
+
+@router.post("/next-commands")
+async def next_commands(body: NextCommandIn, db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """Ollama로 다음 명령어 3개 예측."""
+
+ # 1. 사용자 자주 쓰는 명령 조회
+ rows = await db.execute(
+ select(CommandHistory.command, func.count(CommandHistory.id).label("cnt"))
+ .where(CommandHistory.user_id == user.id,
+ CommandHistory.used_at > datetime.utcnow() - timedelta(days=7))
+ .group_by(CommandHistory.command)
+ .order_by(desc("cnt")).limit(5)
+ )
+ frequent = [r[0] for r in rows.all()]
+
+ # 2. Ollama 컨텍스트 분석
+ recent = body.recent_messages[-5:] if body.recent_messages else []
+ context_str = "\n".join(recent) if recent else "대화 없음"
+
+ try:
+ async with httpx.AsyncClient(timeout=15) as c:
+ r = await c.post(f"{OLLAMA_URL}/api/generate", json={
+ "model": TEXT_MODEL,
+ "system": """GUARDiA ITSM 운영 어시스턴트.
+사용 가능 명령: /sr create, /server status, /deploy, /incident create,
+/kb search, /dashboard, /assign, /cmdb, /report, /alert
+JSON 배열로만 답변: ["/cmd1", "/cmd2", "/cmd3"]""",
+ "prompt": f"최근 대화:\n{context_str}\n\n컨텍스트: {body.context}\n다음에 유용한 명령 3개:",
+ "stream": False,
+ })
+ resp = r.json().get("response", "[]")
+
+ # JSON 파싱 시도
+ import re
+ arr_match = re.search(r'\[([^\]]+)\]', resp)
+ if arr_match:
+ raw = arr_match.group(0)
+ suggested = json.loads(raw)
+ else:
+ suggested = DEFAULT_COMMANDS[:3]
+ except Exception:
+ suggested = DEFAULT_COMMANDS[:3]
+
+ # 3. 자주 쓰는 명령 우선 포함
+ all_cmds = frequent[:2] + [c for c in suggested if c not in frequent]
+ final = all_cmds[:3] if all_cmds else DEFAULT_COMMANDS[:3]
+
+ return {
+ "commands": final,
+ "source": "ai+history",
+ "frequent": frequent[:3],
+ }
+
+
+@router.get("/quick-commands")
+async def quick_commands(db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """자주 쓰는 명령 + 기본 명령 목록."""
+ rows = await db.execute(
+ select(CommandHistory.command, func.count(CommandHistory.id).label("cnt"))
+ .where(CommandHistory.user_id == user.id)
+ .group_by(CommandHistory.command)
+ .order_by(desc("cnt")).limit(8)
+ )
+ user_frequent = [{"command": r[0], "use_count": r[1]} for r in rows.all()]
+
+ return {
+ "frequent": user_frequent,
+ "defaults": [{"command": c, "use_count": 0} for c in DEFAULT_COMMANDS[:6]],
+ }
+
+
+@router.post("/learn")
+async def learn_command(body: LearnIn, db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """명령 사용 기록 학습 (클릭/실행 시 호출)."""
+ log = CommandHistory(
+ user_id=user.id,
+ command=body.command,
+ room=body.room,
+ success=body.success,
+ used_at=datetime.utcnow(),
+ )
+ db.add(log); await db.commit()
+ return {"ok": True, "learned": body.command}
+
+
+@router.get("/suggestions")
+async def get_suggestions(context: str = "", db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """현재 컨텍스트 기반 명령 추천."""
+ ctx_lower = context.lower()
+
+ # 키워드 기반 규칙 추천
+ rules = {
+ "서버": ["/server status", "/server check all", "/cmdb server"],
+ "배포": ["/deploy", "/deploy status", "/deploy rollback"],
+ "sr": ["/sr create", "/sr list", "/sr assign"],
+ "인시던트": ["/incident create", "/incident list", "/incident assign"],
+ "보고서": ["/report generate", "/report monthly", "/sla report"],
+ }
+ for keyword, cmds in rules.items():
+ if keyword in ctx_lower:
+ return {"suggestions": cmds, "matched_context": keyword}
+
+ # 기본 추천
+ return {"suggestions": DEFAULT_COMMANDS[:5], "matched_context": "default"}
+
+
+@router.post("/voice-process")
+async def voice_process(body: VoiceIn, db: AsyncSession = Depends(get_db),
+ user: User = Depends(get_current_user)):
+ """음성 텍스트→ITSM 명령 매핑 + Ollama 자연어 처리."""
+ text = body.text.strip()
+
+ # 1. 직접 매핑 확인
+ for korean, cmd in VOICE_COMMAND_MAP.items():
+ if korean in text:
+ return {
+ "original_text": text,
+ "mapped_command": cmd,
+ "confidence": "high",
+ "method": "keyword_mapping",
+ }
+
+ # 2. Ollama 자연어 처리
+ try:
+ async with httpx.AsyncClient(timeout=15) as c:
+ r = await c.post(f"{OLLAMA_URL}/api/generate", json={
+ "model": TEXT_MODEL,
+ "system": """ITSM 명령어 매퍼.
+사용자 음성을 ITSM 슬래시 명령으로 변환.
+가능한 명령: /sr create, /server status, /deploy, /incident create, /dashboard
+슬래시 명령만 출력 (설명 없음).""",
+ "prompt": f"음성: '{text}'\n→ ITSM 명령:",
+ "stream": False,
+ })
+ resp = r.json().get("response", "").strip()
+ import re
+ cmd_match = re.search(r'/\w+(?:\s+\w+)*', resp)
+ if cmd_match:
+ return {"original_text": text, "mapped_command": cmd_match.group(),
+ "confidence": "medium", "method": "ollama"}
+ except Exception:
+ pass
+
+ return {
+ "original_text": text,
+ "mapped_command": None,
+ "confidence": "low",
+ "method": "failed",
+ "suggestion": "텍스트를 직접 입력하세요",
+ }
diff --git a/static/app.js b/static/app.js
index 5c3463e..e6cbab5 100644
--- a/static/app.js
+++ b/static/app.js
@@ -367,6 +367,11 @@ function renderCurrentView() {
else if (currentView === "batch_ssh") renderBatchSsh();
else if (currentView === "asset_qr") renderAssetQr();
else if (currentView === "notification_rules") renderNotificationRules();
+ // ── 디자인 AI + 스마트 UX 뷰 ──
+ else if (currentView === "design_dashboard") renderDesignDashboard();
+ else if (currentView === "design_icon") renderDesignIcon();
+ else if (currentView === "design_css") renderDesignCSS();
+ else if (currentView === "design_review") renderDesignReview();
// ── GUARDiA Brain 뷰 ──
else if (currentView === "brain_dashboard") renderBrainDashboard();
else if (currentView === "ai_memory") renderAiMemory();
@@ -4761,3 +4766,226 @@ async function installPlugin(name) {
showToast(d.ok ? `${name} 설치됨` : (d.message||"이미 설치됨"), d.ok?"success":"info");
if(d.ok) loadPlugins();
}
+
+
+// ══════════════════════════════════════════════════════════════════════════════
+// ── GUARDiA 디자인 AI + 스마트 UX 뷰
+// ══════════════════════════════════════════════════════════════════════════════
+
+function renderDesignDashboard() {
+ document.getElementById("content").innerHTML = `
+ 🎨 디자인 AI — SR 자동화
+ 디자인 수정 SR을 AI가 자동 분류·처리. Ollama llava 비전 분석 + SVG 아이콘 생성 + CSS 자동 생성.
+ 로딩 중...
+ ${_nextCard("빠른 디자인 SR 처리","⚡",`
+
+
+
+ `)}
+ ${_nextCard("디자인 SR 이력","📋","로딩 중...
")}`;
+ loadDesignData();
+}
+async function autoResolveDesignSR() {
+ const req = document.getElementById("design-req").value;
+ if(!req) return showToast("요구사항 입력 필요","error");
+ const t = localStorage.getItem("token")||"";
+ showToast("AI 처리 중...","info");
+ const r = await fetch("/api/design/auto-resolve",{method:"POST",
+ headers:{Authorization:`Bearer ${t}`,"Content-Type":"application/json"},
+ body:JSON.stringify({requirement:req})});
+ const d = await r.json();
+ const el = document.getElementById("design-result");
+ el.innerHTML = `
+
분류: ${d.design_type} | AI 처리: ${d.resolved_by_ai?"✅":"❌"}
+ ${d.generated_code?`
${d.generated_code}`:""}
+
${d.next_step||""}
+
+
${s.icon}
+
${s.val}
+
${s.label}
+
+
${s.design_type}${s.requirement}
+
${s.status}
+
처리된 디자인 SR 없음
";
+}
+
+function renderDesignIcon() {
+ document.getElementById("content").innerHTML = `
+ 🎨 SVG 아이콘 생성
+ 텍스트로 설명하면 SVG 아이콘을 자동 생성합니다. GUARDiA 브랜드 색상(#003366) 기본 적용.
+ ${_nextCard("아이콘 생성","✨",`
+
+
+
+
+
+
+ `)}
+ ${_nextCard("내장 아이콘 라이브러리","📚","로딩 중...
")}`;
+ loadIconLibrary();
+}
+async function generateIcon() {
+ const desc = document.getElementById("icon-desc").value;
+ const color = document.getElementById("icon-color").value;
+ if(!desc) return showToast("아이콘 설명 입력","error");
+ const t = localStorage.getItem("token")||"";
+ showToast("아이콘 생성 중...","info");
+ const r = await fetch("/api/icon/generate",{method:"POST",
+ headers:{Authorization:`Bearer ${t}`,"Content-Type":"application/json"},
+ body:JSON.stringify({description:desc,color,save:true})});
+ const d = await r.json();
+ const el = document.getElementById("icon-result");
+ if(d.svg_code) {
+ el.innerHTML = `
+
${d.svg_code}
+
+
${d.svg_code.substring(0,200)}
+
+ ${builtins.map(ic=>`
`).join("")}
+
내장 ${builtins.length}개 | 생성 ${(lib.custom||[]).length}개
`;
+}
+
+function renderDesignCSS() {
+ document.getElementById("content").innerHTML = `
+ ✍️ CSS 자동 생성
+ 자연어로 디자인 요구사항을 설명하면 CSS 코드를 자동 생성합니다. GUARDiA 브랜드 변수 자동 적용.
+ ${_nextCard("CSS 생성","⚙️",`
+
+
+
+
+
+
+ `)}
+ ${_nextCard("GUARDiA 브랜드 변수","🎨",`
+ 로딩 중...
+ `)}
+ ${_nextCard("생성 이력","📋","로딩 중...
")}`;
+ loadCSSData();
+}
+async function generateCSS() {
+ const req = document.getElementById("css-req").value;
+ const mode = document.getElementById("css-mode").value;
+ if(!req) return showToast("요구사항 입력","error");
+ const t = localStorage.getItem("token")||"";
+ showToast("CSS 생성 중...","info");
+ const r = await fetch("/api/css/generate",{method:"POST",
+ headers:{Authorization:`Bearer ${t}`,"Content-Type":"application/json"},
+ body:JSON.stringify({requirement:req,mode})});
+ const d = await r.json();
+ document.getElementById("css-result").innerHTML = `
+
CSS ID: ${d.css_id}
+
${d.generated_css||""}
+
+
${d.preview_tip||""}
+
${k}: ${v}
`).join("");
+ const he = document.getElementById("css-history");
+ if(he) he.innerHTML = hist.length ? hist.map(h=>`
+
${h.requirement}
+
${h.applied?"✅ 적용됨":"대기"}
+
생성 이력 없음
";
+}
+
+function renderDesignReview() {
+ document.getElementById("content").innerHTML = `
+ 🔍 스크린샷 UI 분석
+ 스크린샷을 업로드하면 Ollama llava가 UI/UX를 분석하고 개선 제안을 제공합니다.
+ ${_nextCard("스크린샷 분석","📸",`
+
+
+
+
+
+
+
+ `)}
+ ${_nextCard("텍스트 디자인 리뷰","✍️",`
+
+
+
+ `)}`;
+}
+async function analyzeScreenshot() {
+ const file = document.getElementById("review-file").files[0];
+ const q = document.getElementById("review-q").value || "이 UI의 개선점을 한국어로 3가지 제안해줘";
+ if(!file) return showToast("이미지 파일 선택 필요","error");
+ const t = localStorage.getItem("token")||"";
+ showToast("llava 비전 분석 중... (30초 내외 소요)","info");
+ const form = new FormData();
+ form.append("file",file); form.append("question",q);
+ const r = await fetch("/api/design/analyze",{method:"POST",headers:{Authorization:`Bearer ${t}`},body:form});
+ const d = await r.json();
+ document.getElementById("review-result").innerHTML = `
+
분석 ID: ${d.analysis_id} | 모델: ${d.model||"llava:7b"}
+
${d.analysis||""}
+
+
분류: ${d.design_type}
+
${d.analysis||""}
+
브랜딩 설정
+
+
+
+
+
+
디자인 SR 대시보드
+
아이콘 생성
+
CSS 자동 생성
+
스크린샷 분석
+