Okay, I can help you set up the structure and core components for the `DrugDiscov` Flutter web application. Since integrating a specific, pre-trained ML model directly into Flutter Web without a backend requires significant effort (potentially involving JavaScript interop with libraries like TensorFlow.js or ONNX Runtime Web, or WASM compilation), I will implement a **mock analysis service** for now. This service will simulate the analysis process and return placeholder data. You can replace this mock service with the actual ML model integration later. Here's the initial setup for the application: name: drugdiscov description: A medical compound analyzer web app. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: '>=3.0.0 <4.0.0' dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.6 # Use the latest version provider: ^6.0.5 # For state management shared_preferences: ^2.2.2 # For local storage (login state) pdf: ^3.10.4 # For PDF generation printing: ^5.11.0 # For PDF preview and download go_router: ^12.1.1 # For routing intl: ^0.18.1 # For date formatting dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^3.0.1 # Use the latest version flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware # For details regarding adding assets from package dependencies, see # https://flutter.dev/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here, # in this "flutter" section. Each entry in this list should have a # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:drugdiscov/providers/auth_provider.dart'; import 'package:drugdiscov/providers/analysis_provider.dart'; import 'package:drugdiscov/router/app_router.dart'; import 'package:drugdiscov/theme/app_theme.dart'; void main() async { // Ensure widgets are initialized before checking auth status WidgetsFlutterBinding.ensureInitialized(); // Initialize AuthProvider and check initial login state final authProvider = AuthProvider(); await authProvider.checkLoginStatus(); runApp( MultiProvider( providers: [ ChangeNotifierProvider.value(value: authProvider), ChangeNotifierProvider(create: (_) => AnalysisProvider()), ], child: const DrugDiscovApp(), ), ); } class DrugDiscovApp extends StatelessWidget { const DrugDiscovApp({super.key}); @override Widget build(BuildContext context) { final authProvider = Provider.of(context); final router = AppRouter(authProvider).router; return MaterialApp.router( title: 'DrugDiscov', theme: AppTheme.lightTheme, routerConfig: router, debugShowCheckedModeBanner: false, ); } } import 'package:flutter/material.dart'; class AppTheme { static final ThemeData lightTheme = ThemeData( brightness: Brightness.light, primaryColor: const Color(0xFF0D47A1), // Dark Blue colorScheme: ColorScheme.fromSeed( seedColor: const Color(0xFF42A5F5), // Medium Blue brightness: Brightness.light, primary: const Color(0xFF0D47A1), // Dark Blue secondary: const Color(0xFF1976D2), // Slightly Lighter Blue surface: Colors.white, background: const Color(0xFFE3F2FD), // Very Light Blue error: Colors.redAccent, onPrimary: Colors.white, onSecondary: Colors.white, onSurface: Colors.black87, onBackground: Colors.black87, onError: Colors.white, ), scaffoldBackgroundColor: const Color(0xFFE3F2FD), // Very Light Blue background appBarTheme: const AppBarTheme( backgroundColor: Color(0xFF0D47A1), // Dark Blue AppBar foregroundColor: Colors.white, // White text/icons on AppBar elevation: 2, titleTextStyle: TextStyle( fontSize: 20, fontWeight: FontWeight.w500, color: Colors.white, ), ), drawerTheme: const DrawerThemeData( backgroundColor: Colors.white, ), cardTheme: CardTheme( elevation: 1, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), color: Colors.white, surfaceTintColor: Colors.white, ), inputDecorationTheme: InputDecorationTheme( border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFF90CAF9)), // Light Blue border ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFF90CAF9)), // Light Blue border ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFF1976D2), width: 2), // Medium Blue focus border ), filled: true, fillColor: Colors.white, contentPadding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0), ), elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( backgroundColor: const Color(0xFF1976D2), // Medium Blue button foregroundColor: Colors.white, // White text on button shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 20.0), textStyle: const TextStyle( fontSize: 16, fontWeight: FontWeight.w500, ), ), ), textTheme: const TextTheme( // Define specific text styles if needed, e.g., for clinical look headlineSmall: TextStyle(fontSize: 24, fontWeight: FontWeight.w500, color: Color(0xFF0D47A1)), titleLarge: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, color: Colors.black87), bodyLarge: TextStyle(fontSize: 16, color: Colors.black87), bodyMedium: TextStyle(fontSize: 14, color: Colors.black54), labelLarge: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.white), // For button text ), useMaterial3: true, ); } import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:drugdiscov/providers/auth_provider.dart'; import 'package:drugdiscov/screens/login_screen.dart'; import 'package:drugdiscov/screens/dashboard_screen.dart'; import 'package:drugdiscov/screens/analyze_view.dart'; // Import AnalyzeView class AppRouter { final AuthProvider authProvider; AppRouter(this.authProvider); late final GoRouter router = GoRouter( refreshListenable: authProvider, initialLocation: '/login', routes: [ GoRoute( path: '/login', builder: (BuildContext context, GoRouterState state) { return const LoginScreen(); }, ), ShellRoute( // Use ShellRoute for dashboard layout builder: (context, state, child) { // Only show dashboard layout if authenticated return authProvider.isLoggedIn ? DashboardScreen(child: child) : const LoginScreen(); }, routes: [ GoRoute( path: '/analyze', builder: (BuildContext context, GoRouterState state) { return const AnalyzeView(); // Main content for dashboard }, ), // Add other dashboard routes here if needed // GoRoute( // path: '/history', // builder: (BuildContext context, GoRouterState state) { // return const HistoryView(); // Example // }, // ), ], ), ], redirect: (BuildContext context, GoRouterState state) { final bool loggedIn = authProvider.isLoggedIn; final bool loggingIn = state.matchedLocation == '/login'; // If not logged in and not trying to log in, redirect to login if (!loggedIn && !loggingIn) { return '/login'; } // If logged in and trying to access login, redirect to dashboard's main view if (loggedIn && loggingIn) { return '/analyze'; } // No redirect needed return null; }, ); } import 'package:flutter/foundation.dart'; import 'package:shared_preferences/shared_preferences.dart'; class AuthProvider with ChangeNotifier { bool _isLoggedIn = false; static const String _loggedInKey = 'isLoggedIn'; bool get isLoggedIn => _isLoggedIn; // Hardcoded credentials final String _validUsername = 'admin'; final String _validPassword = 'analyze123'; Future checkLoginStatus() async { final prefs = await SharedPreferences.getInstance(); _isLoggedIn = prefs.getBool(_loggedInKey) ?? false; notifyListeners(); } Future login(String username, String password) async { // Simulate network delay/authentication check await Future.delayed(const Duration(milliseconds: 500)); if (username == _validUsername && password == _validPassword) { _isLoggedIn = true; final prefs = await SharedPreferences.getInstance(); await prefs.setBool(_loggedInKey, true); notifyListeners(); return true; } else { _isLoggedIn = false; notifyListeners(); return false; } } Future logout() async { _isLoggedIn = false; final prefs = await SharedPreferences.getInstance(); await prefs.remove(_loggedInKey); notifyListeners(); } } import 'package:flutter/foundation.dart'; import 'package:drugdiscov/models/analysis_result.dart'; import 'package:drugdiscov/services/mock_analysis_service.dart'; class AnalysisProvider with ChangeNotifier { final MockAnalysisService _analysisService = MockAnalysisService(); bool _isLoading = false; AnalysisResult? _analysisResult; String? _errorMessage; bool get isLoading => _isLoading; AnalysisResult? get analysisResult => _analysisResult; String? get errorMessage => _errorMessage; Future analyzeCompound(String compoundName, String smiles) async { _isLoading = true; _analysisResult = null; _errorMessage = null; notifyListeners(); try { // Basic Input Validation (can be expanded) if (compoundName.isEmpty || smiles.isEmpty) { throw Exception("Compound Name and SMILES string cannot be empty."); } // Add more complex SMILES validation if needed _analysisResult = await _analysisService.analyze(compoundName, smiles); _errorMessage = null; } catch (e) { _errorMessage = e.toString(); _analysisResult = null; } finally { _isLoading = false; notifyListeners(); } } void clearResults() { _analysisResult = null; _errorMessage = null; _isLoading = false; notifyListeners(); } } // Represents the data structure for the analysis results class AnalysisResult { final String compoundName; final String smiles; final double predictedActivity; // Example metric final double toxicityScore; // Example metric final String insights; // Example text insight final DateTime analysisTimestamp; AnalysisResult({ required this.compoundName, required this.smiles, required this.predictedActivity, required this.toxicityScore, required this.insights, required this.analysisTimestamp, }); // Add methods for JSON serialization/deserialization if needed later // for saving/loading from local storage (e.g., IndexedDB) } import 'dart:math'; import 'package:drugdiscov/models/analysis_result.dart'; // Simulates the ML model analysis class MockAnalysisService { final Random _random = Random(); Future analyze(String compoundName, String smiles) async { // Simulate processing time await Future.delayed(Duration(seconds: _random.nextInt(3) + 1)); // 1-3 seconds delay // Simulate potential errors based on input (simple example) if (smiles.toLowerCase().contains('error')) { throw Exception("Simulated analysis error: Invalid SMILES structure detected."); } if (compoundName.toLowerCase().contains('fail')) { throw Exception("Simulated analysis failure: Could not process compound."); } // Generate mock results double predictedActivity = _random.nextDouble() * 100.0; // 0.0 to 100.0 double toxicityScore = _random.nextDouble(); // 0.0 to 1.0 String insights; if (predictedActivity > 75 && toxicityScore < 0.3) { insights = "High predicted activity with low toxicity. Promising candidate."; } else if (predictedActivity < 30) { insights = "Low predicted activity. May not be effective."; } else if (toxicityScore > 0.7) { insights = "High toxicity score. Potential safety concerns."; } else { insights = "Moderate activity and toxicity. Further investigation needed."; } return AnalysisResult( compoundName: compoundName, smiles: smiles, predictedActivity: predictedActivity, toxicityScore: toxicityScore, insights: insights, analysisTimestamp: DateTime.now(), ); } } import 'dart:typed_data'; import 'package:pdf/pdf.dart'; import 'package:pdf/widgets.dart' as pw; import 'package:printing/printing.dart'; import 'package:intl/intl.dart'; import 'package:drugdiscov/models/analysis_result.dart'; class PdfService { Future generateReportPdf(AnalysisResult result) async { final pdf = pw.Document(); final dateFormat = DateFormat('yyyy-MM-dd HH:mm:ss'); pdf.addPage( pw.Page( pageFormat: PdfPageFormat.a4, build: (pw.Context context) { return pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: [ pw.Header( level: 0, child: pw.Text('DrugDiscov Analysis Report', style: pw.TextStyle(fontSize: 24, fontWeight: pw.FontWeight.bold)), ), pw.SizedBox(height: 20), pw.Row( mainAxisAlignment: pw.MainAxisAlignment.spaceBetween, children: [ pw.Text('Compound Analysis Details', style: pw.TextStyle(fontSize: 18, fontWeight: pw.FontWeight.bold)), pw.Text('Generated: ${dateFormat.format(result.analysisTimestamp)}', style: const pw.TextStyle(fontSize: 10)), ] ), pw.Divider(thickness: 1, height: 20), _buildInfoRow('Compound Name:', result.compoundName), _buildInfoRow('SMILES String:', result.smiles, wrap: true), // Allow SMILES to wrap pw.SizedBox(height: 20), pw.Text('Analysis Results:', style: pw.TextStyle(fontSize: 16, fontWeight: pw.FontWeight.bold)), pw.Divider(thickness: 0.5, height: 15), _buildInfoRow('Predicted Activity:', '${result.predictedActivity.toStringAsFixed(2)} %'), _buildInfoRow('Toxicity Score:', result.toxicityScore.toStringAsFixed(3)), _buildInfoRow('Insights:', result.insights, wrap: true), // Allow insights to wrap pw.Spacer(), // Push footer to bottom pw.Footer( title: pw.Text('DrugDiscov Report - Confidential', style: const pw.TextStyle(fontSize: 9, color: PdfColors.grey)) ) ], ); }, ), ); return pdf.save(); } // Helper for consistent row styling pw.Widget _buildInfoRow(String label, String value, {bool wrap = false}) { return pw.Padding( padding: const pw.EdgeInsets.symmetric(vertical: 4), child: pw.Row( crossAxisAlignment: wrap ? pw.CrossAxisAlignment.start : pw.CrossAxisAlignment.center, children: [ pw.SizedBox( width: 120, // Fixed width for labels child: pw.Text(label, style: pw.TextStyle(fontWeight: pw.FontWeight.bold)), ), pw.SizedBox(width: 10), pw.Expanded( child: pw.Text(value, softWrap: wrap), ), ], ), ); } Future downloadPdf(Uint8List pdfBytes, String filename) async { // Uses the printing package which handles web downloads automatically await Printing.sharePdf(bytes: pdfBytes, filename: filename); } Future previewPdf(Uint8List pdfBytes) async { // Uses the printing package for preview (opens in new tab on web) await Printing.layoutPdf(onLayout: (PdfPageFormat format) async => pdfBytes); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:drugdiscov/providers/auth_provider.dart'; class LoginScreen extends StatefulWidget { const LoginScreen({super.key}); @override State createState() => _LoginScreenState(); } class _LoginScreenState extends State { final _formKey = GlobalKey(); final _usernameController = TextEditingController(); final _passwordController = TextEditingController(); bool _isLoading = false; String? _errorMessage; @override void dispose() { _usernameController.dispose(); _passwordController.dispose(); super.dispose(); } Future _login() async { if (_formKey.currentState!.validate()) { setState(() { _isLoading = true; _errorMessage = null; }); final authProvider = Provider.of(context, listen: false); final success = await authProvider.login( _usernameController.text, _passwordController.text, ); if (!success && mounted) { setState(() { _errorMessage = 'Invalid username or password'; _isLoading = false; }); } // No need for setState if successful, as the router redirect will handle it if (!success) { setState(() { _isLoading = false; }); } } } @override Widget build(BuildContext context) { final theme = Theme.of(context); final isSmallScreen = MediaQuery.of(context).size.width < 600; return Scaffold( backgroundColor: theme.colorScheme.background, body: Center( child: SingleChildScrollView( // Prevents overflow on small screens child: ConstrainedBox( constraints: BoxConstraints(maxWidth: isSmallScreen ? 350 : 400), child: Card( elevation: 4, margin: const EdgeInsets.all(20), child: Padding( padding: const EdgeInsets.all(24.0), child: Form( key: _formKey, child: Column( mainAxisSize: MainAxisSize.min, // Fit content children: [ Icon( Icons.science_outlined, // Medical/Science Icon size: 60, color: theme.primaryColor, ), const SizedBox(height: 16), Text( 'DrugDiscov Login', style: theme.textTheme.headlineSmall, ), const SizedBox(height: 24), TextFormField( controller: _usernameController, decoration: const InputDecoration( labelText: 'Username', prefixIcon: Icon(Icons.person_outline), ), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter your username'; } return null; }, ), const SizedBox(height: 16), TextFormField( controller: _passwordController, decoration: const InputDecoration( labelText: 'Password', prefixIcon: Icon(Icons.lock_outline), ), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return 'Please enter your password'; } return null; }, onFieldSubmitted: (_) => _isLoading ? null : _login(), // Allow login on enter ), const SizedBox(height: 16), if (_errorMessage != null) Padding( padding: const EdgeInsets.only(bottom: 12.0), child: Text( _errorMessage!, style: TextStyle(color: theme.colorScheme.error), ), ), const SizedBox(height: 8), _isLoading ? const CircularProgressIndicator() : SizedBox( // Ensure button takes full width width: double.infinity, child: ElevatedButton( onPressed: _login, child: const Text('Login'), ), ), const SizedBox(height: 16), Text( 'Hint: admin / analyze123', // Display hint for easy testing style: theme.textTheme.bodySmall?.copyWith(color: Colors.grey), ), ], ), ), ), ), ), ), ), ); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:go_router/go_router.dart'; import 'package:drugdiscov/providers/auth_provider.dart'; class DashboardScreen extends StatelessWidget { final Widget child; // The content to display (e.g., AnalyzeView) const DashboardScreen({super.key, required this.child}); @override Widget build(BuildContext context) { final authProvider = Provider.of(context, listen: false); final theme = Theme.of(context); final isSmallScreen = MediaQuery.of(context).size.width < 800; // Adjust breakpoint as needed return Scaffold( appBar: AppBar( title: const Text('DrugDiscov Dashboard'), actions: [ IconButton( icon: const Icon(Icons.logout), tooltip: 'Logout', onPressed: () async { await authProvider.logout(); // Router redirect will handle navigation }, ), const SizedBox(width: 10), ], ), drawer: isSmallScreen ? _buildDrawer(context, theme) : null, // Only show drawer on smaller screens body: Row( children: [ // Sidebar (only visible on larger screens) if (!isSmallScreen) _buildSidebar(context, theme), // Main Content Area Expanded( child: Padding( padding: const EdgeInsets.all(16.0), child: child, // Display the routed child widget (e.g., AnalyzeView) ), ), ], ), ); } Widget _buildDrawer(BuildContext context, ThemeData theme) { return Drawer( child: ListView( padding: EdgeInsets.zero, children: [ DrawerHeader( decoration: BoxDecoration( color: theme.primaryColor, ), child: Text( 'DrugDiscov Menu', style: theme.textTheme.titleLarge?.copyWith(color: Colors.white), ), ), _buildDrawerItem(context, Icons.biotech, 'Analyze Compound', '/analyze'), // Add more items here if needed // _buildDrawerItem(context, Icons.history, 'Analysis History', '/history'), const Divider(), ListTile( leading: const Icon(Icons.logout), title: const Text('Logout'), onTap: () async { Navigator.pop(context); // Close drawer first await Provider.of(context, listen: false).logout(); }, ), ], ), ); } Widget _buildSidebar(BuildContext context, ThemeData theme) { // Use NavigationRail for a more standard sidebar look return NavigationRail( selectedIndex: _calculateSelectedIndex(context), // Highlight current selection onDestinationSelected: (int index) { // Navigate based on index if (index == 0) context.go('/analyze'); // Add more navigation logic if more destinations exist // if (index == 1) context.go('/history'); }, labelType: NavigationRailLabelType.all, // Show labels backgroundColor: theme.cardColor, // Use card color for sidebar background indicatorColor: theme.colorScheme.primaryContainer.withOpacity(0.3), elevation: 2, leading: Padding( // Optional: Add a logo or header padding: const EdgeInsets.symmetric(vertical: 20.0), child: Icon( Icons.science_outlined, size: 40, color: theme.primaryColor, ), ), destinations: const [ NavigationRailDestination( icon: Icon(Icons.biotech_outlined), selectedIcon: Icon(Icons.biotech), label: Text('Analyze'), ), // Add more destinations here // NavigationRailDestination( // icon: Icon(Icons.history_outlined), // selectedIcon: Icon(Icons.history), // label: Text('History'), // ), ], ); } ListTile _buildDrawerItem(BuildContext context, IconData icon, String title, String route) { final bool isSelected = GoRouterState.of(context).matchedLocation == route; final theme = Theme.of(context); return ListTile( leading: Icon(icon, color: isSelected ? theme.primaryColor : null), title: Text(title, style: TextStyle(fontWeight: isSelected ? FontWeight.bold : FontWeight.normal)), selected: isSelected, selectedTileColor: theme.primaryColor.withOpacity(0.1), onTap: () { Navigator.pop(context); // Close the drawer context.go(route); // Navigate to the route }, ); } // Helper to determine the selected index for NavigationRail int _calculateSelectedIndex(BuildContext context) { final String location = GoRouterState.of(context).matchedLocation; if (location.startsWith('/analyze')) return 0; // if (location.startsWith('/history')) return 1; // Example for another route return 0; // Default to the first item } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:drugdiscov/providers/analysis_provider.dart'; import 'package:drugdiscov/widgets/analysis_form.dart'; import 'package:drugdiscov/widgets/results_display.dart'; class AnalyzeView extends StatelessWidget { const AnalyzeView({super.key}); @override Widget build(BuildContext context) { final analysisProvider = Provider.of(context); return SingleChildScrollView( // Allow content to scroll if needed child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Compound Analysis', style: Theme.of(context).textTheme.headlineSmall, ), const SizedBox(height: 20), // Analysis Form Card const Card( child: Padding( padding: EdgeInsets.all(16.0), child: AnalysisForm(), ), ), const SizedBox(height: 20), // Loading Indicator if (analysisProvider.isLoading) const Center( child: Padding( padding: EdgeInsets.symmetric(vertical: 30.0), child: Column( children: [ CircularProgressIndicator(), SizedBox(height: 10), Text("Analyzing compound..."), ], ), ), ), // Error Message Display if (analysisProvider.errorMessage != null && !analysisProvider.isLoading) Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 20.0), child: Card( color: Theme.of(context).colorScheme.errorContainer, child: Padding( padding: const EdgeInsets.all(16.0), child: Text( "Error: ${analysisProvider.errorMessage}", style: TextStyle(color: Theme.of(context).colorScheme.onErrorContainer), textAlign: TextAlign.center, ), ), ), ), ), // Results Display Card (only show if results exist and not loading) if (analysisProvider.analysisResult != null && !analysisProvider.isLoading) Card( child: Padding( padding: const EdgeInsets.all(16.0), child: ResultsDisplay(result: analysisProvider.analysisResult!), ), ), ], ), ); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:drugdiscov/providers/analysis_provider.dart'; class AnalysisForm extends StatefulWidget { const AnalysisForm({super.key}); @override State createState() => _AnalysisFormState(); } class _AnalysisFormState extends State { final _formKey = GlobalKey(); final _compoundNameController = TextEditingController(); final _smilesController = TextEditingController(); @override void dispose() { _compoundNameController.dispose(); _smilesController.dispose(); super.dispose(); } void _submitAnalysis() { if (_formKey.currentState!.validate()) { final analysisProvider = Provider.of(context, listen: false); analysisProvider.analyzeCompound( _compoundNameController.text, _smilesController.text, ); } } @override Widget build(BuildContext context) { final analysisProvider = Provider.of(context); // Listen for loading state return Form( key: _formKey, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Enter Compound Details', style: Theme.of(context).textTheme.titleLarge, ), const SizedBox(height: 16), TextFormField( controller: _compoundNameController, decoration: const InputDecoration( labelText: 'Compound Name', hintText: 'e.g., Aspirin', prefixIcon: Icon(Icons.label_outline), ), validator: (value) { if (value == null || value.trim().isEmpty) { return 'Please enter a compound name'; } return null; }, ), const SizedBox(height: 16), TextFormField( controller: _smilesController, decoration: const InputDecoration( labelText: 'SMILES String', hintText: 'e.g., CC(=O)OC1=CC=CC=C1C(=O)O', prefixIcon: Icon(Icons.science_outlined), // Or a more specific chemical icon if available ), validator: (value) { if (value == null || value.trim().isEmpty) { return 'Please enter a SMILES string'; } // Basic SMILES check (can be improved with regex) // if (!RegExp(r'^[a-zA-Z0-9=#@\[\]\.\+\-\$\%]+$').hasMatch(value)) { // return 'Invalid characters in SMILES string'; // } return null; }, minLines: 1, maxLines: 3, // Allow multiline for longer SMILES ), const SizedBox(height: 24), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ // Optional: Clear button if (_compoundNameController.text.isNotEmpty || _smilesController.text.isNotEmpty || analysisProvider.analysisResult != null) TextButton( onPressed: analysisProvider.isLoading ? null : () { _formKey.currentState?.reset(); _compoundNameController.clear(); _smilesController.clear(); Provider.of(context, listen: false).clearResults(); }, child: const Text('Clear'), ), const SizedBox(width: 10), ElevatedButton.icon( onPressed: analysisProvider.isLoading ? null : _submitAnalysis, // Disable button when loading icon: analysisProvider.isLoading ? Container( // Show spinner inside button when loading width: 18, height: 18, padding: const EdgeInsets.all(2.0), child: const CircularProgressIndicator( strokeWidth: 2, valueColor: AlwaysStoppedAnimation(Colors.white), ), ) : const Icon(Icons.analytics_outlined), label: Text(analysisProvider.isLoading ? 'Analyzing...' : 'Analyze'), ), ], ), ], ), ); } } import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:drugdiscov/models/analysis_result.dart'; import 'package:drugdiscov/services/pdf_service.dart'; class ResultsDisplay extends StatefulWidget { final AnalysisResult result; const ResultsDisplay({super.key, required this.result}); @override State createState() => _ResultsDisplayState(); } class _ResultsDisplayState extends State { final PdfService _pdfService = PdfService(); bool _isGeneratingPdf = false; Future _downloadReport() async { setState(() => _isGeneratingPdf = true); try { final pdfBytes = await _pdfService.generateReportPdf(widget.result); final timestamp = DateFormat('yyyyMMdd_HHmmss').format(widget.result.analysisTimestamp); final filename = 'DrugDiscov_Report_${widget.result.compoundName.replaceAll(' ', '_')}_$timestamp.pdf'; await _pdfService.downloadPdf(pdfBytes, filename); } catch (e) { if (mounted) { ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('Error generating PDF: $e')), ); } } finally { if (mounted) { setState(() => _isGeneratingPdf = false); } } } @override Widget build(BuildContext context) { final theme = Theme.of(context); final dateFormat = DateFormat('yyyy-MM-dd HH:mm:ss'); return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Analysis Results', style: theme.textTheme.titleLarge, ), Text( 'Analyzed: ${dateFormat.format(widget.result.analysisTimestamp)}', style: theme.textTheme.bodySmall, ), ], ), const Divider(height: 20), _buildResultRow(context, 'Compound Name:', widget.result.compoundName), _buildResultRow(context, 'SMILES:', widget.result.smiles, isCode: true), const SizedBox(height: 10), _buildResultRow(context, 'Predicted Activity:', '${widget.result.predictedActivity.toStringAsFixed(2)} %'), _buildResultRow(context, 'Toxicity Score:', widget.result.toxicityScore.toStringAsFixed(3)), _buildResultRow(context, 'Insights:', widget.result.insights), const SizedBox(height: 24), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ ElevatedButton.icon( onPressed: _isGeneratingPdf ? null : _downloadReport, icon: _isGeneratingPdf ? Container( width: 18, height: 18, padding: const EdgeInsets.all(2.0), child: const CircularProgressIndicator( strokeWidth: 2, valueColor: AlwaysStoppedAnimation(Colors.white), ), ) : const Icon(Icons.download_outlined), label: Text(_isGeneratingPdf ? 'Generating...' : 'Download Report (PDF)'), style: ElevatedButton.styleFrom( backgroundColor: theme.colorScheme.secondary, // Use secondary color ), ), ], ), ], ); } Widget _buildResultRow(BuildContext context, String label, String value, {bool isCode = false}) { final theme = Theme.of(context); return Padding( padding: const EdgeInsets.symmetric(vertical: 4.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( width: 130, // Adjust width as needed child: Text( label, style: theme.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600), ), ), const SizedBox(width: 10), Expanded( child: Text( value, style: isCode ? theme.textTheme.bodyMedium?.copyWith(fontFamily: 'monospace') // Use monospace for SMILES : theme.textTheme.bodyMedium, softWrap: true, ), ), ], ), ); } } # DrugDiscov - Compound Analyzer Web App This is a frontend-only Flutter web application designed for analyzing medical compounds based on user input (Compound Name and SMILES string). **Note:** The current version uses a **mock analysis service** to simulate ML model predictions. The actual ML model integration needs to be implemented separately. ## Features - Simple Login (Hardcoded credentials: `admin` / `analyze123`) - Dashboard layout with Top Bar and Sidebar (responsive) - Compound analysis input form (Name and SMILES) - Display of (mock) analysis results: - Predicted Activity - Toxicity Score - Generated Insights - Loading indicator during analysis simulation - Error handling display - PDF report generation and download directly in the browser - Clean, medical-themed UI (Light blue tones) - Frontend-only: No backend required, uses `shared_preferences` (localStorage) for login state. ## Project Structure drugdiscov/ ├── lib/ │ ├── main.dart # App entry point │ ├── models/ # Data models (e.g., AnalysisResult) │ │ └── analysis_result.dart │ ├── providers/ # State management (Provider) │ │ ├── analysis_provider.dart │ │ └── auth_provider.dart │ ├── router/ # Routing configuration (go_router) │ │ └── app_router.dart │ ├── screens/ # Main screens/views │ │ ├── analyze_view.dart │ │ ├── dashboard_screen.dart │ │ └── login_screen.dart │ ├── services/ # Business logic services │ │ ├── mock_analysis_service.dart # <-- Replace with actual ML service │ │ └── pdf_service.dart │ ├── theme/ # App theme configuration │ │ └── app_theme.dart │ └── widgets/ # Reusable UI components │ ├── analysis_form.dart │ └── results_display.dart ├── web/ # Web-specific files (index.html, etc.) ├── pubspec.yaml # Project dependencies and metadata └── README.md # This file ``` ## Getting Started ### Prerequisites - [Flutter SDK](https://docs.flutter.dev/get-started/install) (version 3.10+ recommended) - A web browser (Chrome recommended for development) ### Running the App 1. **Clone the repository (or ensure you have the project files).** 2. **Navigate to the project directory:** ```bash cd path/to/drugdiscov ``` 3. **Get dependencies:** ```bash flutter pub get ``` 4. **Run the application on the web (Chrome):** ```bash flutter run -d chrome ``` This will build the application and launch it in a Chrome browser window. ## Next Steps (ML Model Integration) 1. **Choose an Integration Method:** Decide how to run your ML model in the browser (TensorFlow.js via JS interop, ONNX Runtime Web via JS interop, WASM compilation). 2. **Prepare the Model:** Convert your model to the required format (e.g., TensorFlow.js graph model, ONNX). 3. **Implement JS Interop (if needed):** If using TF.js or ONNX Runtime Web, use Flutter's `dart:js_interop` (for Dart 3+) or the `js` package to call JavaScript functions from Dart. 4. **Create an `AnalysisService`:** Implement a real `AnalysisService` class (e.g., `lib/services/ml_analysis_service.dart`) that uses your chosen method to load and run the model. 5. **Replace Mock Service:** Update `AnalysisProvider` to use your new `AnalysisService` instead of `MockAnalysisService`. 6. **Include Model Files:** Add your model files (e.g., `.json`, `.bin`, `.onnx`) to the `web/` directory or an `assets/` directory and ensure they are accessible by the web build. Update `pubspec.yaml` if using assets. ## Dependencies Used - `flutter/material.dart` - `provider`: State management - `shared_preferences`: Local storage for login state - `pdf`: PDF document generation - `printing`: PDF preview and download/sharing - `go_router`: Application routing - `intl`: Date/time formatting This setup provides a functional skeleton for your `DrugDiscov` application with all the requested UI elements, routing, state management, mock analysis, and PDF generation features implemented using Flutter Web. Remember to replace the `MockAnalysisService` with your actual ML model integration logic.