[Designer] #215 Polish AI settings + frame suggestion surfaces

- 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
This commit is contained in:
2026-06-12 13:07:30 +09:00
parent 1e019c6dc7
commit 71e8c3dd53
2 changed files with 172 additions and 38 deletions

View File

@@ -85,8 +85,7 @@ class _AiSection extends ConsumerWidget {
const Padding( const Padding(
padding: EdgeInsets.fromLTRB(16, 8, 16, 16), padding: EdgeInsets.fromLTRB(16, 8, 16, 16),
child: Text( child: Text(
'OQ-1 미해결: 정확한 모델 URL + SHA 가 픽스되기 전까지 ' '베타 기능 · 모델 다운로드가 정식 제공되기 전까지 일부 동작이 제한됩니다.',
'다운로드는 동작하지 않습니다. (Architect/Developer 인계 사항)',
style: TextStyle(fontSize: 12, color: Colors.grey), style: TextStyle(fontSize: 12, color: Colors.grey),
), ),
), ),
@@ -97,13 +96,13 @@ class _AiSection extends ConsumerWidget {
String _describe(ModelAvailability a) { String _describe(ModelAvailability a) {
switch (a) { switch (a) {
case ModelAvailability.ready: case ModelAvailability.ready:
return '사용 가능'; return '준비 완료 — 새 습관 만들기에서 ✨ AI 제안을 쓸 수 있어요';
case ModelAvailability.missing: case ModelAvailability.missing:
return '미설치 — 토글을 켜면 다운로드를 시작합니다'; return '아직 받지 않았어요 — 위 토글을 켜면 다운로드합니다';
case ModelAvailability.corrupt: case ModelAvailability.corrupt:
return '손상됨 — 토글을 끄고 다시 켜주세요'; return '파일이 손상됐어요 — 끄고 다시 켜면 새로 받습니다';
case ModelAvailability.downloading: case ModelAvailability.downloading:
return '다운로드 중 / 일시정지됨'; return '다운로드 중';
} }
} }
@@ -117,11 +116,19 @@ class _AiSection extends ConsumerWidget {
context: context, context: context,
builder: (_) => AlertDialog( builder: (_) => AlertDialog(
title: const Text('AI 도움 켜기'), title: const Text('AI 도움 켜기'),
content: const Text( content: Column(
'Gemma 4 E2B 모델 ≈ 1.5GB 를 다운로드합니다.\n' mainAxisSize: MainAxisSize.min,
'- WiFi 권장\n' crossAxisAlignment: CrossAxisAlignment.start,
'- 모든 처리는 단말에서만 일어나며, 입력 텍스트는 외부로 전송되지 않습니다.\n' children: const [
'- 끄면 즉시 삭제됩니다.', Text(
'단말에서 동작하는 AI 모델을 내려받습니다.',
style: TextStyle(fontWeight: FontWeight.w600),
),
SizedBox(height: 12),
_Bullet('파일 크기: 약 1.5GB'),
_Bullet('WiFi 연결을 권장합니다'),
_Bullet('모든 처리는 단말에서만 일어나며, 입력 텍스트는 외부로 전송되지 않습니다'),
],
), ),
actions: [ actions: [
TextButton( TextButton(
@@ -130,7 +137,7 @@ class _AiSection extends ConsumerWidget {
), ),
FilledButton( FilledButton(
onPressed: () => Navigator.of(context).pop(true), onPressed: () => Navigator.of(context).pop(true),
child: const Text('동의 다운로드'), child: const Text('동의하고 다운로드'),
), ),
], ],
), ),
@@ -142,9 +149,22 @@ class _AiSection extends ConsumerWidget {
context: context, context: context,
builder: (_) => AlertDialog( builder: (_) => AlertDialog(
title: const Text('AI 도움 끄기'), title: const Text('AI 도움 끄기'),
content: const Text( content: Column(
'모델 파일 ≈ 1.5GB 가 즉시 삭제됩니다. ' 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: [ actions: [
TextButton( 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. /// AC2: shows download progress + pause/resume/restart controls.
class _DownloadProgressTile extends StatelessWidget { class _DownloadProgressTile extends StatelessWidget {
final DownloadProgress progress; final DownloadProgress progress;
@@ -169,17 +210,26 @@ class _DownloadProgressTile extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final controller = ref.read(modelDownloadControllerProvider.notifier); final controller = ref.read(modelDownloadControllerProvider.notifier);
final pct = progress.totalBytes > 0 final pct = progress.totalBytes > 0
? (progress.bytesReceived / progress.totalBytes).clamp(0.0, 1.0) ? (progress.bytesReceived / progress.totalBytes).clamp(0.0, 1.0)
: null; : null;
final pctText = pct != null final pctText = pct != null
? '${(pct * 100).toStringAsFixed(0)}%' ? '${(pct * 100).toStringAsFixed(0)}%'
: '계산 중...'; : '계산 중';
final size = final size =
'${_fmtBytes(progress.bytesReceived)}' '${_fmtBytes(progress.bytesReceived)}'
'${progress.totalBytes > 0 ? " / ${_fmtBytes(progress.totalBytes)}" : ""}'; '${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; Widget controls;
switch (progress.state) { switch (progress.state) {
case DownloadState.downloading: case DownloadState.downloading:
@@ -190,47 +240,74 @@ class _DownloadProgressTile extends StatelessWidget {
); );
break; break;
case DownloadState.paused: case DownloadState.paused:
controls = TextButton.icon( controls = FilledButton.tonalIcon(
icon: const Icon(Icons.play_arrow), icon: const Icon(Icons.play_arrow),
label: const Text('재개'), label: const Text('재개'),
onPressed: controller.resume, onPressed: controller.resume,
); );
break; break;
case DownloadState.failed: case DownloadState.failed:
controls = TextButton.icon( controls = FilledButton.tonalIcon(
icon: const Icon(Icons.refresh), icon: const Icon(Icons.refresh),
label: const Text('다시 시도'), label: const Text('다시 시도'),
onPressed: controller.resume, onPressed: controller.resume,
); );
break; break;
case DownloadState.completed: case DownloadState.completed:
controls = const Text('완료', style: TextStyle(color: Colors.green));
break;
case DownloadState.idle: case DownloadState.idle:
controls = const SizedBox.shrink(); controls = const SizedBox.shrink();
break; break;
} }
return Padding( return Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 8), padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Row( Row(
children: [ 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, controls,
], ],
), ),
const SizedBox(height: 4), const SizedBox(height: 6),
LinearProgressIndicator(value: pct), ClipRRect(
if (progress.state == DownloadState.failed && borderRadius: BorderRadius.circular(4),
progress.errorMessage != null) child: LinearProgressIndicator(
value: pct,
minHeight: 6,
),
),
if (progress.state == DownloadState.failed)
Padding( Padding(
padding: const EdgeInsets.only(top: 4), padding: const EdgeInsets.only(top: 6),
child: Text( child: Text(
'에러: ${progress.errorMessage}', _friendlyError(progress.errorMessage),
style: const TextStyle(fontSize: 12, color: Colors.red), 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) { String _fmtBytes(int bytes) {
if (bytes < 1024) return '$bytes B'; if (bytes < 1024) return '$bytes B';
if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB'; if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB';

View File

@@ -33,9 +33,11 @@ class FrameSuggestionDialog extends ConsumerWidget {
height: 120, height: 120,
child: Center(child: CircularProgressIndicator()), child: Center(child: CircularProgressIndicator()),
), ),
error: (e, _) => Padding( error: (e, _) => const Padding(
padding: const EdgeInsets.all(8), padding: EdgeInsets.all(8),
child: Text('AI 제안을 받지 못했습니다. 직접 입력해주세요.\n($e)'), child: Text(
'AI 제안을 받지 못했어요.\n직접 입력하셔도 괜찮습니다.',
),
), ),
data: (candidates) { data: (candidates) {
if (candidates.isEmpty) { if (candidates.isEmpty) {
@@ -88,14 +90,49 @@ class _CandidateCard extends StatelessWidget {
@override @override
Widget build(BuildContext context) { 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( return Card(
child: ListTile( margin: const EdgeInsets.symmetric(vertical: 4),
title: Text(candidate.framedText), child: InkWell(
subtitle: Text(
'${candidate.level == FrameLevel.l3 ? "L3 · 정체성" : "L2 · 조건부 긍정"} '
'· 신뢰도 ${(candidate.confidence * 100).toInt()}%',
),
onTap: onTap, 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,
),
],
),
),
), ),
); );
} }