Restructured project: separate backend and ui folders

misinformationui/lib/chat_screen.dart

@@ -0,0 +1,297 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:http/http.dart' as http;
+import 'loading_indicator.dart';
+import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class Message {
+  final String text;
+  final bool isUser;
+  final bool isPreFormatted;
+  final bool isLoading;
+  final int? loadingStep;
+  final bool? isStepCompleted;
+
+  Message({
+    required this.text,
+    required this.isUser,
+    this.isPreFormatted = false,
+    this.isLoading = false,
+    this.loadingStep,
+    this.isStepCompleted,
+  });
+}
+
+class ChatScreen extends StatefulWidget {
+  const ChatScreen({super.key});
+
+  @override
+  State<ChatScreen> createState() => _ChatScreenState();
+}
+
+class _ChatScreenState extends State<ChatScreen> {
+  final List<Message> _messages = [];
+  final TextEditingController _controller = TextEditingController();
+  bool _isBackgroundBlurred = false;
+  final ScrollController _scrollController = ScrollController();
+
+Future<void> _sendMessage() async {
+  final query = _controller.text.trim();
+  if (query.isEmpty) return;
+
+  setState(() {
+    _isBackgroundBlurred = true;
+    _messages.add(Message(text: query, isUser: true));
+    _messages.add(Message(text: '', isUser: false, isLoading: true));
+    _controller.clear();
+  });
+  _scrollToBottom();
+
+  final loadingMessageIndex = _messages.length - 1;
+
+  try {
+    final response = await http.post(
+      Uri.parse('http://localhost:5000/api/detect'),
+      headers: {'Content-Type': 'application/json'},
+      body: jsonEncode({'query': query}),
+    );
+    final data = jsonDecode(response.body);
+
+    setState(() {
+      _messages[loadingMessageIndex] = Message(
+        text: '',
+        isUser: false,
+        isLoading: true,
+        isStepCompleted: true,
+      );
+    });
+
+    await Future.delayed(const Duration(milliseconds: 600));
+
+    setState(() {
+      if (loadingMessageIndex < _messages.length) {
+        _messages.removeAt(loadingMessageIndex);
+      }
+
+      // --- STEP 1: Show raw JSON ---
+      // _messages.add(Message(
+      //   text: jsonEncode(data),
+      //   isUser: false,
+      //   isPreFormatted: true,
+      // ));
+
+      // --- STEP 2: Show only values ---
+      String valuesText = '';
+      if (data is Map) {
+        valuesText = data.values.map((v) => v.toString()).join('\n\n');
+      } else if (data is List) {
+        valuesText = data.map((v) => v.toString()).join('\n\n');
+      } else {
+        valuesText = data.toString();
+      }
+
+      _messages.add(Message(
+        text: valuesText,
+        isUser: false,
+        isPreFormatted: true,
+      ));
+    });
+  } catch (e) {
+    setState(() {
+      if (loadingMessageIndex < _messages.length) {
+        _messages[loadingMessageIndex] = Message(
+          text: '',
+          isUser: false,
+          isLoading: true,
+          isStepCompleted: true,
+        );
+      }
+    });
+    await Future.delayed(const Duration(milliseconds: 600));
+    setState(() {
+      if (loadingMessageIndex < _messages.length) {
+        _messages.removeAt(loadingMessageIndex);
+      }
+      // Do not add any hardcoded error message.
+    });
+  }
+  _scrollToBottom();
+}
+
+  void _scrollToBottom() {
+    Future.delayed(const Duration(milliseconds: 100), () {
+      if (_scrollController.hasClients) {
+        _scrollController.animateTo(
+          _scrollController.position.maxScrollExtent,
+          duration: const Duration(milliseconds: 300),
+          curve: Curves.easeOut,
+        );
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          Expanded(
+            child: Stack(
+              children: [
+                if (!_isBackgroundBlurred)
+                  Center(
+                    child: SizedBox(
+                      width: MediaQuery.of(context).size.width * 0.8,
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Center(
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              crossAxisAlignment: CrossAxisAlignment.center,
+                              children: [
+                                Text(
+                                  'Hey,',
+                                  style: GoogleFonts.courierPrime(
+                                    color: Colors.white,
+                                    fontSize: 64,
+                                    fontWeight: FontWeight.bold,
+                                  ),
+                                  textAlign: TextAlign.start,
+                                ),
+                                const SizedBox(height: 10), // Add some spacing
+                                Text(
+                                  'Discover misinformations around you...',
+                                  style: GoogleFonts.courierPrime(
+                                    color: Colors.white,
+                                    fontSize: 32,
+                                    fontWeight: FontWeight.w500,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                if (_isBackgroundBlurred)
+                  Expanded(
+                    child: ListView.builder(
+                      controller: _scrollController,
+                      padding: const EdgeInsets.all(15),
+                      itemCount: _messages.length,
+                      itemBuilder: (context, index) {
+                        final message = _messages[index];
+                        return MessageBubble(message: message);
+                      },
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          Center(
+            child: Container(
+              width: MediaQuery.of(context).size.width * 0.6,
+              margin: const EdgeInsets.all(16.0),
+              decoration: BoxDecoration(
+                color: Colors.grey[800]!.withOpacity(0.7),
+                borderRadius: BorderRadius.circular(30),
+                border: Border.all(
+                  color: Colors.grey[600]!,
+                  width: 1,
+                ),
+              ),
+              padding: const EdgeInsets.symmetric(horizontal: 15),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: TextField(
+                      controller: _controller,
+                      cursorColor: Colors.white,
+                      style: const TextStyle(color: Colors.white),
+                      decoration: const InputDecoration(
+                        hintText: 'Type an info to verify...',
+                        hintStyle: TextStyle(color: Colors.grey),
+                        border: InputBorder.none,
+                      ),
+                      onSubmitted: (_) => _sendMessage(),
+                    ),
+                  ),
+                  IconButton(
+                    icon: const Icon(Icons.send, color: Colors.white),
+                    onPressed: _sendMessage,
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+
+
+class MessageBubble extends StatelessWidget {
+  final Message message;
+
+  const MessageBubble({super.key, required this.message});
+
+  Future<void> _onOpen(LinkableElement link) async {
+    if (await canLaunchUrl(Uri.parse(link.url))) {
+      await launchUrl(Uri.parse(link.url));
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: message.isUser ? Alignment.centerRight : Alignment.centerLeft,
+      child: Container(
+        constraints: BoxConstraints(
+          maxWidth: MediaQuery.of(context).size.width * 0.8,
+        ),
+        margin: const EdgeInsets.only(bottom: 4),
+        padding: const EdgeInsets.all(10),
+        decoration: message.isUser
+            ? BoxDecoration(
+                color: const Color(0xFF414141),
+                borderRadius: BorderRadius.only(
+                  topLeft: const Radius.circular(20),
+                  topRight: const Radius.circular(20),
+                  bottomLeft: Radius.circular(message.isUser ? 15 : 5),
+                  bottomRight: Radius.circular(message.isUser ? 5 : 15),
+                ),
+              )
+            : null,
+        child: message.isLoading
+            ? LoadingIndicator(
+                isCompleted: message.isStepCompleted ?? false,
+              )
+            : message.isPreFormatted
+                ? SelectableLinkify(
+                    text: message.text,
+                    onOpen: _onOpen,
+                    linkStyle: const TextStyle(
+                      color: Colors.blueAccent,
+                      decoration: TextDecoration.underline
+                    ),
+                    style: const TextStyle(
+                      fontFamily: 'Montserrat',
+                      fontSize: 16,
+                      color: Colors.white,
+                    ),
+                  )
+                : Text(
+                    message.text,
+                    style: const TextStyle(color: Colors.white),
+                  ),
+      ),
+    );
+  }
+}

misinformationui/lib/loading_indicator.dart

@@ -0,0 +1,181 @@
+// loading_indicator.dart
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+class LoadingIndicator extends StatefulWidget {
+  /// When true, the indicator will finish the current step (show its tick)
+  /// and then stop looping.
+  final bool isCompleted;
+
+  /// How long the spinner shows for each step.
+  final Duration spinnerDuration;
+
+  /// How long the tick remains visible before moving to next step.
+  final Duration tickDuration;
+
+  const LoadingIndicator({
+    super.key,
+    required this.isCompleted,
+    this.spinnerDuration = const Duration(seconds: 5),
+    this.tickDuration = const Duration(milliseconds: 1500),
+  });
+
+  @override
+  State<LoadingIndicator> createState() => _LoadingIndicatorState();
+}
+
+class _LoadingIndicatorState extends State<LoadingIndicator> {
+  final List<String> _steps = const [
+    'Processing...',
+    'Preprocessing the query...',
+    'Geolocating...',
+    'Fetching news...',
+    'Analysing bias in news articles...',
+  ];
+
+  int _currentStep = 0;
+  bool _showTick = false;
+
+  // Control flags for the async loop
+  bool _running = false;
+  bool _stopRequested = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _startLoop();
+  }
+
+  void _startLoop() {
+    // Ensure we don't spawn multiple loops
+    if (_running) return;
+    _stopRequested = false;
+    _runLoop();
+  }
+
+  Future<void> _runLoop() async {
+    _running = true;
+    final spinnerDelay = widget.spinnerDuration;
+    final tickDelay = widget.tickDuration;
+
+    while (mounted && !_stopRequested) {
+      // Go through all steps sequentially (this completes one full cycle)
+      for (int i = 0; i < _steps.length; i++) {
+        if (!mounted || _stopRequested) break;
+
+        // show spinner for this step
+        setState(() {
+          _currentStep = i;
+          _showTick = false;
+        });
+
+        // wait spinner time
+        await Future.delayed(spinnerDelay);
+        if (!mounted) break;
+
+        // if parent requested completion while spinner ran, show tick then stop
+        if (widget.isCompleted) {
+          setState(() => _showTick = true);
+          _stopRequested = true;
+          break;
+        }
+
+        // show tick for this step
+        setState(() => _showTick = true);
+
+        // wait tick time
+        await Future.delayed(tickDelay);
+        if (!mounted) break;
+
+        // if parent requested completion during tick, stop after this tick
+        if (widget.isCompleted) {
+          _stopRequested = true;
+          break;
+        }
+      }
+
+      // If stop requested, break out of the outer while
+      if (_stopRequested || !mounted) break;
+
+      // Completed all steps — loop again from step 0
+      // continue while loop -> next for-loop iteration restarts steps
+    }
+
+    // Ensure final UI shows tick on whatever the currentStep was
+    if (mounted) {
+      setState(() => _showTick = true);
+    }
+    _running = false;
+  }
+
+  @override
+  void didUpdateWidget(covariant LoadingIndicator oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    // If parent toggles completion on, request stop so loop finishes current step
+    if (!oldWidget.isCompleted && widget.isCompleted) {
+      _stopRequested = true;
+    }
+
+    // If parent re-enables (isCompleted went false) restart loop if not running
+    if (oldWidget.isCompleted && !widget.isCompleted) {
+      _stopRequested = false;
+      if (!_running) _startLoop();
+    }
+  }
+
+  @override
+  void dispose() {
+    _stopRequested = true;
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final String text = _steps[_currentStep];
+
+    // Single Row — only the text and icon inside AnimatedSwitchers change.
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        // Animated replace of text (one-line only)
+        AnimatedSwitcher(
+          duration: const Duration(milliseconds: 300),
+          transitionBuilder: (child, animation) =>
+              FadeTransition(opacity: animation, child: child),
+          child: Text(
+            text,
+            key: ValueKey<int>(_currentStep),
+            style: const TextStyle(
+              color: Colors.white,
+              fontSize: 16,
+            ),
+          ),
+        ),
+        const SizedBox(width: 10),
+        // Animated replace of spinner <-> tick
+        AnimatedSwitcher(
+          duration: const Duration(milliseconds: 250),
+          transitionBuilder: (child, animation) =>
+              ScaleTransition(scale: animation, child: child),
+          child: _showTick
+              ? const Icon(
+                  Icons.check,
+                  key: ValueKey('tick'),
+                  color: Colors.green,
+                  size: 20,
+                )
+              : const SizedBox(
+                  key: ValueKey('spinner'),
+                  width: 20,
+                  height: 20,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
+                  ),
+                ),
+        ),
+      ],
+    );
+  }
+}

misinformationui/lib/main.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'chat_screen.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      title: 'MisinfoGuard',
+      theme: ThemeData(
+        brightness: Brightness.dark,
+        scaffoldBackgroundColor: const Color(0xFF171717),
+        useMaterial3: true,
+      ),
+      home: const ChatScreen(),
+    );
+  }
+}
+