From 71e8c3dd53d3e0a894e03196d6dca0d046fd580b Mon Sep 17 00:00:00 2001 From: joungmin Date: Fri, 12 Jun 2026 13:07:30 +0900 Subject: [PATCH] [Designer] #215 Polish AI settings + frame suggestion surfaces MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - frame_suggestion_dialog: hide exception detail in error path, redesign candidate card as Card+InkWell with L2/L3 colored level badge (secondary vs primary), remove confidence % surface. - settings_screen: download tile gains state label + colored progress text, rounded LinearProgressIndicator, FilledButton.tonalIcon for resume/retry. _friendlyError() maps internal codes (network:/http /stream:/sha mismatch) to user-readable Korean. Opt-in/out dialogs reorganized with _Bullet rows; beta disclaimer reworded; _describe() friendlier copy. Polish only — no behavior change. analyze 0, 71 tests pass, APK 10.3s. Refs #215 --- app/lib/ui/screens/settings_screen.dart | 155 ++++++++++++++---- .../ui/widgets/frame_suggestion_dialog.dart | 55 ++++++- 2 files changed, 172 insertions(+), 38 deletions(-) diff --git a/app/lib/ui/screens/settings_screen.dart b/app/lib/ui/screens/settings_screen.dart index 068f328..9143b79 100644 --- a/app/lib/ui/screens/settings_screen.dart +++ b/app/lib/ui/screens/settings_screen.dart @@ -85,8 +85,7 @@ class _AiSection extends ConsumerWidget { const Padding( padding: EdgeInsets.fromLTRB(16, 8, 16, 16), child: Text( - 'OQ-1 미해결: 정확한 모델 URL + SHA 가 픽스되기 전까지 ' - '다운로드는 동작하지 않습니다. (Architect/Developer 인계 사항)', + '베타 기능 · 모델 다운로드가 정식 제공되기 전까지 일부 동작이 제한됩니다.', style: TextStyle(fontSize: 12, color: Colors.grey), ), ), @@ -97,13 +96,13 @@ class _AiSection extends ConsumerWidget { String _describe(ModelAvailability a) { switch (a) { case ModelAvailability.ready: - return '사용 가능'; + return '준비 완료 — 새 습관 만들기에서 ✨ AI 제안을 쓸 수 있어요'; case ModelAvailability.missing: - return '미설치 — 토글을 켜면 다운로드를 시작합니다'; + return '아직 받지 않았어요 — 위 토글을 켜면 다운로드합니다'; case ModelAvailability.corrupt: - return '손상됨 — 토글을 끄고 다시 켜주세요'; + return '파일이 손상됐어요 — 끄고 다시 켜면 새로 받습니다'; case ModelAvailability.downloading: - return '다운로드 중 / 일시정지됨'; + return '다운로드 중'; } } @@ -117,11 +116,19 @@ class _AiSection extends ConsumerWidget { context: context, builder: (_) => AlertDialog( title: const Text('AI 도움 켜기'), - content: const Text( - 'Gemma 4 E2B 모델 ≈ 1.5GB 를 다운로드합니다.\n' - '- WiFi 권장\n' - '- 모든 처리는 단말에서만 일어나며, 입력 텍스트는 외부로 전송되지 않습니다.\n' - '- 끄면 즉시 삭제됩니다.', + content: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + Text( + '단말에서 동작하는 AI 모델을 내려받습니다.', + style: TextStyle(fontWeight: FontWeight.w600), + ), + SizedBox(height: 12), + _Bullet('파일 크기: 약 1.5GB'), + _Bullet('WiFi 연결을 권장합니다'), + _Bullet('모든 처리는 단말에서만 일어나며, 입력 텍스트는 외부로 전송되지 않습니다'), + ], ), actions: [ TextButton( @@ -130,7 +137,7 @@ class _AiSection extends ConsumerWidget { ), FilledButton( onPressed: () => Navigator.of(context).pop(true), - child: const Text('동의 후 다운로드'), + child: const Text('동의하고 다운로드'), ), ], ), @@ -142,9 +149,22 @@ class _AiSection extends ConsumerWidget { context: context, builder: (_) => AlertDialog( title: const Text('AI 도움 끄기'), - content: const Text( - '모델 파일 ≈ 1.5GB 가 즉시 삭제됩니다. ' - '다시 켜면 다시 다운로드해야 합니다.', + content: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + Text('모델 파일이 단말에서 삭제됩니다.'), + SizedBox(height: 8), + Text( + '약 1.5GB 의 저장공간이 확보돼요.', + style: TextStyle(fontSize: 13, color: Colors.grey), + ), + SizedBox(height: 4), + Text( + '다시 켜면 다시 다운로드해야 합니다.', + style: TextStyle(fontSize: 13, color: Colors.grey), + ), + ], ), actions: [ TextButton( @@ -161,6 +181,27 @@ class _AiSection extends ConsumerWidget { } } +class _Bullet extends StatelessWidget { + final String text; + const _Bullet(this.text); + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(bottom: 4), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.only(top: 6, right: 8), + child: Icon(Icons.circle, size: 5), + ), + Expanded(child: Text(text, style: const TextStyle(fontSize: 14))), + ], + ), + ); + } +} + /// AC2: shows download progress + pause/resume/restart controls. class _DownloadProgressTile extends StatelessWidget { final DownloadProgress progress; @@ -169,17 +210,26 @@ class _DownloadProgressTile extends StatelessWidget { @override Widget build(BuildContext context) { + final scheme = Theme.of(context).colorScheme; final controller = ref.read(modelDownloadControllerProvider.notifier); final pct = progress.totalBytes > 0 ? (progress.bytesReceived / progress.totalBytes).clamp(0.0, 1.0) : null; final pctText = pct != null ? '${(pct * 100).toStringAsFixed(0)}%' - : '계산 중...'; + : '계산 중'; final size = '${_fmtBytes(progress.bytesReceived)}' '${progress.totalBytes > 0 ? " / ${_fmtBytes(progress.totalBytes)}" : ""}'; + final (stateLabel, stateColor) = switch (progress.state) { + DownloadState.downloading => ('다운로드 중', scheme.primary), + DownloadState.paused => ('일시정지됨', scheme.outline), + DownloadState.failed => ('실패', scheme.error), + DownloadState.completed => ('준비 완료', Colors.green.shade700), + DownloadState.idle => ('대기 중', scheme.outline), + }; + Widget controls; switch (progress.state) { case DownloadState.downloading: @@ -190,47 +240,74 @@ class _DownloadProgressTile extends StatelessWidget { ); break; case DownloadState.paused: - controls = TextButton.icon( + controls = FilledButton.tonalIcon( icon: const Icon(Icons.play_arrow), label: const Text('재개'), onPressed: controller.resume, ); break; case DownloadState.failed: - controls = TextButton.icon( + controls = FilledButton.tonalIcon( icon: const Icon(Icons.refresh), label: const Text('다시 시도'), onPressed: controller.resume, ); break; case DownloadState.completed: - controls = const Text('완료', style: TextStyle(color: Colors.green)); - break; case DownloadState.idle: controls = const SizedBox.shrink(); break; } return Padding( - padding: const EdgeInsets.fromLTRB(16, 0, 16, 8), + padding: const EdgeInsets.fromLTRB(16, 0, 16, 12), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( children: [ - Expanded(child: Text('$size · $pctText')), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + stateLabel, + style: TextStyle( + fontSize: 13, + fontWeight: FontWeight.w600, + color: stateColor, + ), + ), + const SizedBox(height: 2), + Text( + progress.state == DownloadState.completed + ? size + : '$size · $pctText', + style: TextStyle( + fontSize: 12, + color: scheme.onSurfaceVariant, + ), + ), + ], + ), + ), controls, ], ), - const SizedBox(height: 4), - LinearProgressIndicator(value: pct), - if (progress.state == DownloadState.failed && - progress.errorMessage != null) + const SizedBox(height: 6), + ClipRRect( + borderRadius: BorderRadius.circular(4), + child: LinearProgressIndicator( + value: pct, + minHeight: 6, + ), + ), + if (progress.state == DownloadState.failed) Padding( - padding: const EdgeInsets.only(top: 4), + padding: const EdgeInsets.only(top: 6), child: Text( - '에러: ${progress.errorMessage}', - style: const TextStyle(fontSize: 12, color: Colors.red), + _friendlyError(progress.errorMessage), + style: TextStyle(fontSize: 12, color: scheme.error), ), ), ], @@ -238,6 +315,26 @@ class _DownloadProgressTile extends StatelessWidget { ); } + /// Maps internal error codes to user-friendly Korean messages. + /// Hides technical detail (HTTP status, stack) — keeps the next action + /// obvious instead. + String _friendlyError(String? raw) { + if (raw == null) return '다운로드에 실패했어요. 다시 시도해주세요.'; + if (raw.startsWith('network:')) { + return '네트워크 연결을 확인하고 다시 시도해주세요.'; + } + if (raw.startsWith('http ')) { + return '서버 응답이 올바르지 않습니다. 잠시 후 다시 시도해주세요.'; + } + if (raw.startsWith('stream:')) { + return '다운로드가 중단되었어요. 다시 시도하면 이어받습니다.'; + } + if (raw == 'sha mismatch') { + return '파일이 손상되었어요. 다시 시도하면 처음부터 받습니다.'; + } + return '다운로드에 실패했어요. 다시 시도해주세요.'; + } + String _fmtBytes(int bytes) { if (bytes < 1024) return '$bytes B'; if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB'; diff --git a/app/lib/ui/widgets/frame_suggestion_dialog.dart b/app/lib/ui/widgets/frame_suggestion_dialog.dart index 995b796..5341d7b 100644 --- a/app/lib/ui/widgets/frame_suggestion_dialog.dart +++ b/app/lib/ui/widgets/frame_suggestion_dialog.dart @@ -33,9 +33,11 @@ class FrameSuggestionDialog extends ConsumerWidget { height: 120, child: Center(child: CircularProgressIndicator()), ), - error: (e, _) => Padding( - padding: const EdgeInsets.all(8), - child: Text('AI 제안을 받지 못했습니다. 직접 입력해주세요.\n($e)'), + error: (e, _) => const Padding( + padding: EdgeInsets.all(8), + child: Text( + 'AI 제안을 받지 못했어요.\n직접 입력하셔도 괜찮습니다.', + ), ), data: (candidates) { if (candidates.isEmpty) { @@ -88,14 +90,49 @@ class _CandidateCard extends StatelessWidget { @override Widget build(BuildContext context) { + final scheme = Theme.of(context).colorScheme; + final isL3 = candidate.level == FrameLevel.l3; + final levelLabel = isL3 ? '정체성' : '조건부 긍정'; + final levelCode = isL3 ? 'L3' : 'L2'; + final levelColor = isL3 ? scheme.primary : scheme.secondary; return Card( - child: ListTile( - title: Text(candidate.framedText), - subtitle: Text( - '${candidate.level == FrameLevel.l3 ? "L3 · 정체성" : "L2 · 조건부 긍정"} ' - '· 신뢰도 ${(candidate.confidence * 100).toInt()}%', - ), + margin: const EdgeInsets.symmetric(vertical: 4), + child: InkWell( onTap: onTap, + borderRadius: BorderRadius.circular(8), + child: Padding( + padding: const EdgeInsets.fromLTRB(12, 10, 12, 12), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Container( + padding: + const EdgeInsets.symmetric(horizontal: 6, vertical: 2), + decoration: BoxDecoration( + color: levelColor.withValues(alpha: 0.12), + borderRadius: BorderRadius.circular(4), + ), + child: Text( + '$levelCode · $levelLabel', + style: TextStyle( + fontSize: 11, + color: levelColor, + fontWeight: FontWeight.w600, + ), + ), + ), + ], + ), + const SizedBox(height: 6), + Text( + candidate.framedText, + style: Theme.of(context).textTheme.bodyLarge, + ), + ], + ), + ), ), ); }