使用 Claude3.5 只需 2 分钟快速构建仪表盘

news2024/9/27 9:18:44

image.png
这是用 claude 生成的图表，只花了 2 分钟

目录

  • Claude何时使用Artifacts？
  • 我如何使用Artifacts？
  • 我的例子
  • 让claude导出本地部署
  • 结尾

关键还可以分享

image.png

这是分享之后的链接：

https://claude.site/artifacts/1cf37377-1d00-4ab2-b8dd-af3dcc459ab0

日常开发中要产出一些图表示例，在没有 ai 之前可能需要下载用 excel 或者 bi 工具，而现在用 claude 3.5 的Artifacts可以快速跑出图表📊

Claude中的Artifacts是专门的窗口，用于显示用户请求生成的重要的、独立的内容。这不仅仅是简单的文本回复，而是可以交互、编辑的输出，包含代码片段、文档、网站、图片等，用户还可以编辑Claude创建的Artifacts，能够实时修改和迭代AI生成的内容；也可以轻松保存和导出，以便在Claude之外使用。

Artifacts允许Claude在与主对话分开的专用窗口中与您共享大量独立内容。Artifacts使处理您可能想要修改、构建或稍后引用的重要内容变得容易。

Claude何时使用Artifacts？

当Claude共享的内容具有以下特征时，它会创建一个Artifact：

  • 内容重要且独立，通常超过15行

  • 这是您可能想要在对话之外编辑、迭代或重复使用的内容

  • 它代表一个复杂的内容片段，可以独立存在而不需要额外的对话上下文

  • 这是您可能想要稍后回顾或使用的内容

Artifact内容的一些常见例子包括：

  • 文档（Markdown或纯文本）

  • 代码片段

  • 网站（单页HTML）

  • 可缩放矢量图形（SVG）图像

  • 图表和流程图

  • 交互式React组件

我如何使用Artifacts？

当Claude创建一个Artifact时，您会在主聊天窗口右侧的新专用窗口中看到Artifact内容。这使您可以轻松查看、复制和处理Artifact内容。

关于与Artifacts交互，有几个关键点需要了解：

  • 您可以要求Claude编辑或迭代内容，这些更新将直接显示在Artifact窗口中。

    • 这些编辑不会改变Claude对原始Artifact内容的记忆，您可以使用Artifact左下角的版本选择器在每个版本之间切换。

  • 您可以使用聊天控件在一个对话中打开和查看多个Artifacts。要访问此功能，请点击右上角的滑块图标。选择您希望Claude引用的Artifact，然后继续您上次离开的地方。

  • Claude可能会根据您的消息更新现有的Artifact。Artifact窗口将更新以显示最新内容。

  • 您可以查看Artifact的底层代码，将内容复制到剪贴板，或下载文件以便在对话外轻松重用。这些选项位于Artifact的右下角。

我的例子

订单ID日期客户ID产品类别数量单价总价地区
10012023/1/15C001笔记本电脑电子产品149994999华东
10022023/1/16C002咖啡机家用电器1899899华北
10032023/1/16C003运动鞋服装鞋帽2299598华南
10042023/1/17C004智能手表电子产品112991299西南
10052023/1/17C005书架家居家装1399399华中
10062023/1/18C001无线耳机电子产品1799799华东
10072023/1/18C006瑜伽垫运动户外1129129西北
10082023/1/19C007蓝牙音箱电子产品1369369东北
10092023/1/19C008电饭煲家用电器1459459华南
10102023/1/20C009床上四件套家居家装2299598华北
10112023/1/20C010平板电脑电子产品129992999华东
10122023/1/21C011跑步机运动户外126992699西南
10132023/1/21C012护肤套装美妆个护1599599华中
10142023/1/22C013儿童玩具母婴用品399297华南
10152023/1/22C014办公椅家居家装1699699华北
依据数据，帮我生产一个数据分析看板【订单ID 日期 客户ID 产品 类别 数量 单价 总价 地区1001 2023/1/15 C001 笔记本电脑 电子产品 1 4999 4999 华东1002 2023/1/16 C002 咖啡机 家用电器 1 899 899 华北1003 2023/1/16 C003 运动鞋 服装鞋帽 2 299 598 华南1004 2023/1/17 C004 智能手表 电子产品 1 1299 1299 西南1005 2023/1/17 C005 书架 家居家装 1 399 399 华中1006 2023/1/18 C001 无线耳机 电子产品 1 799 799 华东1007 2023/1/18 C006 瑜伽垫 运动户外 1 129 129 西北1008 2023/1/19 C007 蓝牙音箱 电子产品 1 369 369 东北1009 2023/1/19 C008 电饭煲 家用电器 1 459 459 华南1010 2023/1/20 C009 床上四件套 家居家装 2 299 598 华北1011 2023/1/20 C010 平板电脑 电子产品 1 2999 2999 华东1012 2023/1/21 C011 跑步机 运动户外 1 2699 2699 西南1013 2023/1/21 C012 护肤套装 美妆个护 1 599 599 华中1014 2023/1/22 C013 儿童玩具 母婴用品 3 99 297 华南1015 2023/1/22 C014 办公椅 家居家装 1 699 699 华北】

claude 会直接生成数据看板，效果如图

image.png
样式很美观

让claude导出本地部署

image.png

当然，我可以指导您如何使用 Vite 和 pnpm 在本地部署这个 React 应用。以下是步骤：

  1. 首先，确保您的系统中已安装了 Node.js。

  2. 安装 pnpm（如果尚未安装）:

    npm install -g pnpm

  3. 创建一个新的 Vite 项目：

    pnpm create vite sales-dashboard --template react

  4. 进入项目目录：

    cd sales-dashboard

  5. 安装依赖：

    pnpm install

  6. 安装额外需要的依赖：

    pnpm add recharts @radix-ui/react-slot class-variance-authority clsx tailwind-merge @radix-ui/react-accordion

  7. 设置 Tailwind CSS。首先安装 Tailwind 及其依赖：

    pnpm add -D tailwindcss postcss autoprefixer

  8. 初始化 Tailwind 配置：

    npx tailwindcss init -p

  9. 修改 tailwind.config.js 文件：

    /** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  10. 在 src/index.css 文件中添加 Tailwind 指令：

    @tailwind base;
@tailwind components;
@tailwind utilities;

  11. 创建 src/components/ui/card.jsx 文件，并添加以下内容：

    import * as React from "react"
import { cn } from "@/lib/utils"

const Card = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardContent = React.forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

export { Card, CardHeader, CardContent }

  12. 创建 src/lib/utils.js 文件，并添加以下内容：

    import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

  13. 将之前创建的 Dashboard 组件代码保存到 src/components/Dashboard.jsx 文件中。

  14. 修改 src/App.jsx 文件，引入 Dashboard 组件：

    import Dashboard from './components/Dashboard'

function App() {
  return (
    <div className="App">
      <Dashboard />
    </div>
  )
}

export default App

  15. 运行开发服务器：

    pnpm dev

现在，您应该能够在浏览器中通过 http://localhost:5173 访问到这个销售数据分析看板了。

如果您想要构建生产版本，可以运行：

pnpm build

这将在 dist 目录中生成生产就绪的文件。

结尾

可能有一些 bug,但效率是真得高！效果很惊艳

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1992620.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PMP考试一定要考到3A吗？怎么备考？

PMP考试一定要考到3A吗？怎么备考？

PMP&#xff08;Project Management Professional&#xff09;认证是全球公认的项目管理专业人士资格认证&#xff0c;它代表着项目管理领域的高水平标准。 在备考PMP考试时&#xff0c;有些赛宝关心是否需要考到3A&#xff08;即三个领域均为Above Target&#xff0c;超出目标…
阅读更多...
【中项】系统集成项目管理工程师-第10章 项目整合管理-10.7结束项目或阶段

【中项】系统集成项目管理工程师-第10章 项目整合管理-10.7结束项目或阶段

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…
阅读更多...
[Python学习日记-3] 编程前选择一个好用的编程工具

[Python学习日记-3] 编程前选择一个好用的编程工具

[Python学习日记-3] 编程前选择一个好用的编程工具 简介 PyCharm IDE的安装 PyCharm IDE安装后的一些常规使用 简介 在踏上 Python 编程的精彩旅程之前&#xff0c;选择一款得心应手的编程工具无疑是至关重要的一步。这就如同战士在出征前精心挑选趁手的武器&#xff0c;它将…
阅读更多...
Unity补完计划 之 音效

Unity补完计划 之 音效

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 首先&#xff0c;音频这块组件较少&#xff0c;但是内容很重要&#xff0c;因为对于任何一款非特殊面向人群的游戏来说&a…
阅读更多...
SQLiteStudio 连接sqlite3数据库（真机数据库可视化调试）

SQLiteStudio 连接sqlite3数据库（真机数据库可视化调试）

SQLiteStudio安装 官网链接&#xff1a;https://sqlitestudio.pl/ 下载后&#xff0c;直接按部就班&#xff0c;打开即可使用 用户手册&#xff08;工具如何使用直接看这份就可以了&#xff09;&#xff1a;https://github.com/pawelsalawa/sqlitestudio/wiki/User_Manual 其…
阅读更多...
GoFly快速开发框架代码市场使用说明

GoFly快速开发框架代码市场使用说明

说明 我们框架坚持开源的项目绝不能存在收费项目&#xff0c;所以我们gofly快速开发开源版没有内置代码仓插件&#xff0c;因此需要使用代码市场中的代码包需要再企业版中使用&#xff0c;代码市场插件如下&#xff1a; 图1、社区-代码市场​​​​ 他和企业版管理后台的代码仓…
阅读更多...
Component和Loader

Component和Loader

文章目录 文章内容效果图代码 文章内容 效果图 代码 import QtQuick 2.15 import QtQuick.Window 2.15 import FluentUI import QtQuick.Controls 2.5Window {visible: truewidth: 320height: 240// 自定义组件:需要手动加载Component{id:comRectangle{id:rectwidth: 80heigh…
阅读更多...
关闭Windows安全中心

关闭Windows安全中心

打开Windows安全中心的病毒和威胁防护。 打开该选项的管理设置。 关闭实时保护。
阅读更多...
【RTOS面试题】RTOS和Linux的区别

【RTOS面试题】RTOS和Linux的区别

实时操作系统&#xff08;RTOS, Real-Time Operating System&#xff09;与Linux操作系统&#xff08;一种典型的普通操作系统&#xff0c;General-Purpose Operating System, GPOS&#xff09;之间存在一些显著的区别。这两种操作系统各有侧重&#xff0c;适用于不同的应用场景…
阅读更多...
循环执行时数据的同步方式

循环执行时数据的同步方式

在dataX-web中循环执行时数据的同步方式 解决中文comment中文乱码 在mysql中 # &#xff08;0&#xff09;修改库注释 alter table DBS modify column desc varchar(256) character set utf8; alter table DATABASE_PARAMS modify column PARAM_VALUE varchar(256) characte…
阅读更多...
用python创建极坐标平面

用python创建极坐标平面

极坐标的介绍 http://t.csdnimg.cn/ucau3http://t.csdnimg.cn/ucau3这个文章里可以知道极坐标的基本知识&#xff0c;接下来实现极坐标的绘制 PolarPlane 是 Manim&#xff08;一个用于数学动画的Python库&#xff09;中的一个类&#xff0c;用于创建极坐标平面。与笛卡尔…
阅读更多...
汇昌联信数字做拼多多运营怎么做？

汇昌联信数字做拼多多运营怎么做？

在当今电商竞争激烈的环境下&#xff0c;如何有效地在拼多多这样的平台上进行运营&#xff0c;是许多商家和品牌都在思考的问题。汇昌联信数字作为一家致力于提供数字化解决方案的公司&#xff0c;其在拼多多上的运营策略值得深入探讨。本文将详细分析汇昌联信数字在拼多多上的…
阅读更多...
【HBZ分享】Spring启动时核心refresh方法流程

【HBZ分享】Spring启动时核心refresh方法流程

refresh核心代码所在位置 在AbstractApplicationContext类中的refresh方法中 refresh的业务流程编排 调用obtainFreshBeanFactory()去创建一个全新的BeanFactory工厂&#xff0c;类型为DefaultListableBeanFctory&#xff0c;其功能为【解析xml】将里面bean标签内容解析成【…
阅读更多...
信息学奥林匹克竞赛详解-CSP、NOIP、NOI、IOI是什么

信息学奥林匹克竞赛详解-CSP、NOIP、NOI、IOI是什么

近年来&#xff0c;随着计算机在教育领域的影响力越来越大&#xff0c;信息学奥林匹克竞赛也越来越受关注。 山东省在2017年秋季正式出版了《小学信息技术》&#xff0c;大幅度引入了Scratch、Python等编程语言。 浙江省在2018年的高考选考科目中新增了信息技术&#xff0c;包…
阅读更多...
【Qt】图形化和纯代码实现Hello world的比较

【Qt】图形化和纯代码实现Hello world的比较

本篇文章使用俩种方式实现Qt上的Hello world&#xff1a; 通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显式Hello world通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c;显示Hello world 图形化方式 双击Forms文件中的…
阅读更多...
CTFHUB-web-RCE-读取源代码

CTFHUB-web-RCE-读取源代码

开启题目 网页发现了源代码&#xff0c;还是和前几题一样是 php:// &#xff0c;提示说 flag 在代码中&#xff0c;并且在 /flag 文件夹中&#xff0c;题目名字也叫读取源代码。 php://filter 是一种元封装器&#xff0c;专门用于数据流的过滤和筛选。与传统的文件操作函数相比…
阅读更多...
selenium的UI自动化框架入门

selenium的UI自动化框架入门

环境准备 python、pycharme、chromedriver google下载的官网地址 https://google.cn/chrome/ chromedriver chromedriver的下载 https://chromedriver.storage.googleapis.com/index.html chromedriver配置环境变量 C:\Users\Administrator\.cache\selenium\chromedrive…
阅读更多...
Python的安装环境以及应用

Python的安装环境以及应用

1.环境python2&#xff0c;Python 最新安装3.12可以使用源码安装 查看安装包 [rootpython001 ~]# yum list installed | grep epel 3[rootpython001 ~]# yum list installed | grep python [rootpython001 ~]# yum -y install python3 安装python3 查看版本 [root…
阅读更多...
【LLM大模型】中国人工智能系列白皮书--大模型技术

【LLM大模型】中国人工智能系列白皮书--大模型技术

近期&#xff0c;中国人工智能学会发布了 《2023 中国人工智能系列白皮书–大模型技术&#xff08;2023版&#xff09;》&#xff0c;涵盖了大模型发展历程、技术概述、风险与挑战以及未来发展展望等。 &#x1f449;CSDN大礼包&#x1f381;&#xff1a;全网最全《LLM大模型入…
阅读更多...
控制某些请求不记录日志

控制某些请求不记录日志

说明&#xff1a;由于统一拦截日志请求&#xff0c;导致所有匹配的请求都会打印日志&#xff0c;这里需要控制有些请求执行不打印日志&#xff0c;比如定时每隔几秒执行某些请求。 具体实现如下&#xff1a; 一、自定义注解&#xff0c;如下&#xff1a; /** * Description: …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023