我们启动这个项目是为了参加 dev.to 上的 Microsoft Azure Hackathon。
我们的目标是为现有的电影列表添加一些特殊功能。
想象一下，晚上想看什么电影，却想不出名字。
这时， Moodflix 可以根据你的实际心情，帮你找到最适合你夜晚观看的电影。 选择电影后，Moodflix 会通过其专属的心情图标显示所有电影评论。 你还可以一目了然地查看电影的整体评价，了解大家是否喜欢它。 快来体验一下吧，如果你喜欢它，请给我们一个⭐️，我们将不胜感激。
您可以在此处找到演示环境：https://moodflix.th3wall.codes/
该项目的类别是：AI Aces。
我们正在使用Azure Face API和Azure Text Analytics。
此外，为了发布前端，我们使用Azure 静态 Web 应用程序，为了发布后端，我们使用 Azure 应用服务。
我们已经使用GitHub Actions实现了 CI/CD 。
我们在黑客马拉松开始两天后就完成了第一次提交。
在黑客马拉松之前我们从未启动过这个项目——这是一个专为本次挑战而打造的全新项目。
我们讨论了应用程序的主题，然后这个绝妙的想法浮现在我们脑海中。
请为这个项目打个⭐，以便我们期待未来的更新（我们有很多想法将在不久的将来实现）。
前端使用React 17.0.2和SCSS编写。
在应用程序的主页上，我们会实时从您的网络摄像头捕捉图片（我们使用了专门的 NPM 包），并通过 API 将图片以 base64 字符串的形式直接发送到后端。
后端使用.NET 6编写，更具体地说是ASP.NET Core 6和 Minimal API。
我们的应用程序中不存储任何内容（我们没有任何数据库或存储）。API
从前端接收 base64 字符串图像，并将其直接发送到 Azure 人脸 API（我们使用的是Azure 的人脸 API SDK：它是 NuGet 上的预览版）。
我们不在从 Azure 收到的回复中添加任何逻辑。后端会将检测到的人脸的所有详细信息（例如胡须、眼镜、物体、情绪等）再次发送到前端。
前端处理请求，并将计算出的情绪（例如快乐、愤怒、悲伤等）发送到后端的下一个请求。
我们使用自己的逻辑从后端调用TMDB API，根据用户情绪获取电影列表。
前端显示结果，并且每当用户点击其中一张电影海报时，就会出现详情页面。
在结果页面顶部，我们根据分析的面部细节，显示一个“动态”拟我表情（Apple 表情）：我们添加了 12 个不同的拟我表情（每种性别对应 6 种情绪变体），根据检测到的情绪，分别代表拍摄对象的年龄：小于 30 岁、50 岁或以上。
此外，我们还为佩戴眼镜的拍摄对象添加了不同的拟我表情。
我们如何检索数据？前端调用服务器上的 API，而在后端，我们从 TMDB API 检索评论，并将其发送到Azure 文本分析API。
我们还会将电影的概述一起发送。Azure
服务返回评论的情绪和关键词，并通过 UI 将它们全部显示出来。
这是我们在 Azure 上部署的服务列表
对于文本分析，我们使用“法国中部”地区，因为它在西欧仍然不可用。
我认为这应该是一个暂时的问题。
为了完成这个项目，我们使用了Gitflow工作流程。
我目前所有的日常项目都使用这个工作流程，我非常喜欢它。
我们之前也从未同时在这个项目上合作过。
我一直是“早起的鸟儿”，而 Davide 则是“夜猫子”。
我相信这是一个很好的例子，可以展示开发人员如何在需要时轻松高效地在远程和不同时区处理同一个项目。
重要的是，要使用正确的工具，以精确清晰的方式设定目标和任务。
借助两个 GitHub Actions，我们已经通过 CI/CD 实现了构建的自动化。
后端开发教程 - Java、Spring Boot 实战 - msg200.com
name: Moodflix-Frontend
on:
push:
branches: [ main ]
paths: [ 'Frontend/**' ]
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_HILL_0BA50CF03 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/Frontend/" # App source code path
api_location: "" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_HILL_0BA50CF03 }}
action: "close"
这是前端操作的示例。
在这两个操作中，我们在“主”分支提交后将所有内容推送到生产环境。
此外，我们根据包含前端和后端源代码的文件夹对操作应用了过滤器。
然后，我们仅发布正在更改的项目。
正在加载页面
带有网络摄像头的登陆页面
结果
电影详情
这个 repo 在我的GitHub 个人资料里，但我们是以两人团队的形式进行这个项目的。
成员分别是kasuken和th3wall。
Emanuele 是SoftwareONE 的Microsoft 365 架构师，他喜欢通过 Twitch、他的博客和 LinkedIn 等多个平台分享他对技术的热爱。
他负责该项目的后端（使用 ASP.NET Core 6 Minimal API 编写）以及 Azure AI 的整体逻辑。
Davide 是一位前端工程师，他因在 GitHub 上创建著名的Fakeflix仓库而闻名。
他负责了这个项目的整个 UI 设计，从 logo 的设计到 React 中的每一行代码。