电影推荐

Movie Recommendations

介绍

电影推荐模板是一个交互式平台，旨在根据用户的偏好和观看习惯推荐电影。它旨在作为构建推荐引擎的强大基础，并提供个性化的电影推荐。

此模板是唯一一个（目前）不仅提供静态数据集，还允许您连接到 Neo4j 数据库以检索数据并在模板中呈现数据的模板。

此功能允许您将数据从数据库连接并检索到模板中，这是一种实验性功能（因此仅在此模板中可用）。它旨在与推荐数据集配合使用。如果您使用不同的数据集或数据模型，您可能需要修改 Cypher 查询和/或数据结构以适应您的需求。

链接到实时预览

链接到模板代码

文档

布局架构

MovieArchitecture

模板入口位于Home.tsx组件中，该组件协调用户交互和从静态 JSON 文件或您的 Neo4j 数据库检索数据。

主要组件包括

  • 用于导航和数据库连接管理的Header。

  • 用于处理数据库连接配置的ConnectionModal。

  • 用于通过交互式 UI 元素呈现电影推荐的Content。

代码片段

获取和显示推荐
useEffect(() => {
  const fetchData = async () => {
    setLoading({ main: true, similarGenre: true, otherUsers: true });
    if (useReco) {
      const { uri, user, password } = JSON.parse(localStorage.getItem('neo4j-connection') ?? '') ?? {};
      setDriver(uri, user, password);
      await Promise.all([
        fetchMovies(queryMainMovie).then(movies => setMainMovie(movies || [])),
        fetchMovies(similarByGenre).then(movies => setRecoSimilarGenre(movies || [])),
        fetchMovies(queryOtherUsersAlsoWatched).then(movies => setRecoOtherUsers(movies || [])),
      ]);
      setLoading({ main: false, similarGenre: false, otherUsers: false });
    }
  };

  fetchData();
}, [useReco]);
显示错误消息
{recoError ? (
  <Flex flexDirection='row' justifyContent='center' alignItems='center'>
    <Typography variant='h1'>Data error</Typography>
    <Typography variant='body-medium'>
      An error occurred while fetching recommendations data. Please ensure you are connected to a Neo4j Database.
    </Typography>
  </Flex>
) : (
  <Content mainMovie={mainMovie} recoSimilarGenre={recoSimilarGenre} recoOtherUsers={recoOtherUsers} />
)}

数据集/连接到 Neo4j 数据库

默认情况下，应用程序使用静态数据集movies.json进行演示。该模板支持在静态数据集和来自 Neo4j 数据库的实时数据之间动态切换，让您更直观地了解使用您的数据时模板可能是什么样子。

连接到 Neo4j 数据库
<ConnectionModal
  open={isConnectionModalOpen}
  setOpenConnection={setIsConnectionModalOpen}
  setConnectionStatus={setUseReco}
  message={{
    type: 'warning',
    content: 'Ensure you connect to a Neo4j database containing the Recommendation dataset.',
  }}
/>