2024山东大学创新实训 前端分析以及框架搭建

 本周主要是对于前端的需求进行分析，并初步搭建好前端的构架。

前端需求分析

首先是对前端展示内容的分析：我们的项目作为一个交互式旅游推荐系统，主要需要向用户展示如下功能：

1. 用户对话。这个功能主要是因为我们这是个交互式问答系统，需要用户提出问题我们来回答，根据用户的问题推荐合适的旅游地点。这个界面类似于各个在线大模型（比如文心一言、ChatGPT）的对话界面。
2. 景点的详细信息。为了方便用户了解目的地的信息，我们计划在用户对话的部分里，在大模型返回的句子中提取出景点名称，并让景点名称的文本可以点击，用户点击后在右侧显示出景点的详细信息，并给出相应的配图给用户参考。

具体而言前端核心界面如下图所示：

其中左半部分是用户对话界面，右边是景点详情。在用户点击景点名称之前，不会显示景点详情部分，用户对话部分居中显示；当用户点击景点名称之后，用户对话部分平移到左边，并弹出景点详情界面，如果用户此时继续对话，那景点详情会自动折叠。

用户对话界面的样式类似于ChatGPT，其中上面会一条条显示用户与模型的对话，而底部有一个输入框，用户在此处提问。对话的句子里的景点名称会识别并标注出来，可供用户点击。

景点详情界面仅在用户点击景点名称时弹出，在用户对话时收回。底部会显示景点的详细精准的介绍，顶部会展示该景点的风景，如果有多张的还会轮播展示。

整个界面应该还会有一个顶栏，放上用户登录等相关导航按钮，此外还有用户登录、注册、信息管理等相关页面，这些部分较为宽泛通用，等到需要时再讨论。

框架选择

这个项目我选择了flutter框架来写前端，Flutter 是 Google 开源的应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。因为它有着良好的跨平台特性，非常适合同时开发移动端和桌面端的程序，并且也可以编译为web程序，在必要时嵌入网页端中。

通常我应该在这里详细介绍Flutter，并详细且细致地描述搭配开发环境的过程，但是由于我之前写过flutter的项目，因此本地已经有完善的开发环境：

1. Dart SDK 3.4.2
2. Flutter SDK 3.19
3. IntelliJ IDEA Ultimate 2024.1 ，安装有flutter和dart插件

初始化项目

新建项目并进行配置

flutter的字形和语言需要自己配置，代码如下

locale: const Locale("zh", "CN"),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("zh", "CN"),
      ],

最终代码如下

void main() async{
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '大模型旅游推荐系统',
      locale: const Locale("zh", "CN"),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("zh", "CN"),
      ],
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange).copyWith(
          background: Colors.grey.shade300
        ),
        fontFamily: "Microsoft Yahei",
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}