GithubHelp home page GithubHelp logo

yuyz0112 / dewhale Goto Github PK

View Code? Open in Web Editor NEW
1.1K 12.0 100.0 1.86 MB

GitHub-Powered AI for effortless development. Start as an open-source alternative to v0.dev.

Home Page: https://dewhale.pages.dev/

License: Apache License 2.0

JavaScript 30.61% HTML 0.26% CSS 1.21% TypeScript 13.99% Shell 0.15% Vue 30.53% Svelte 20.31% Astro 2.94%

dewhale's Introduction

Dewhale

Dewhale is a GitHub-Powered AI for effortless development.

中文文档

If you are looking for vx.dev, check our rebranding discussion.

Quick Start

For detailed instructions on how to set up and use Dewhale, please refer to our Guide.

With the power of our quota management feature, we allow stargazers to have 3 trials.

You can also watch this demo video.

More examples can be found in the issue list.

Features

Lower Usage Costs

Dewhale utilizes prompt engineering techniques under the GPT-4 model to issue commands. The main cost involves the number of input and completion tokens. Our current prompt, found in prompts/ui-gen.md, includes instructions for shadcn/ui, lucide, and nivo charts.

If you do not need certain components (e.g., charts), you can reduce the API cost per generation by removing instructions from the prompt.

And you can also switch to other AI models for lower usage costs.

Easy Customization

Since Dewhale's prompt is open-sourced, you can refer to the existing prompt and replace it with other UI component libraries or coding styles as per your requirements.

You can also customize the whole workflow by yourself, e.g., a v0.dev-like Web App, and just use Dewhale's prompt as a core.

Seamless GitHub Integration

The generated code is stored on GitHub, inherently equipped with version control, code review, and collaborative features.

Additionally, you can use a private repo to keep your code generation results visible only to collaborators.

How It Works

To understand the underlying architecture and workings of Dewhale, please see our detailed Architecture Overview.

Join the Discussions

If you like the design philosophy of Dewhale, feel free to join our Github Discussions.

dewhale's People

Contributors

linzhe141 avatar techquery avatar wangrunlin avatar yuyz0112 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dewhale's Issues

节点图可视化页面

创建一个节点图可视化页面。
页面布局为,顶部bar包括上传网络信息、测试、用户登录按钮。
中间为根据后端提供的网络节点拓扑图生成可视化图像,图的边记录两端节点的信息。节点点开后进入二级菜单查看节点信息。
图网络先使用随机生成的节点和边填充。
底部为用户信息介绍。

mailbox

image

create a mailbox UI like this

image gallery

Design a personal photography portfolio website.
The first part from top to bottom is the photographer’s nickname and introduction, using a main image to fill in the background. The second part is the photo display wall. The width of the photo is fixed, and the length is a random value after the original image is compressed proportionally. The block of each photo contains a set label. When you click on the image, a secondary page will pop up (including the original image and image introduction). , image tag, contact the author to request the original image button, like button, close secondary page button).

AST explorer

an AST explorer can choose different parsers, the left part is the source code, and the right part is the AST tree viz

image

f

Product Page for a health app

auth page

image

create an auth page that looks like this

Restaurant menu

Make this menu with orderable buttons, all styles are included, make this responsive

image

前端组件展示网站

创建一个前端组件展示网站。
左侧为菜单,有组件、hook、wiki 几大类,大类中可点击切换具体内容。
右侧展示具体信息,若为组件,则展示简介、基本演示与示例代码、各属性对应的演示与示例代码、属性列表、slot 列表、事件列表;若为 hook,则展示简介、基本演示与示例代码、入参列表、返回值列表。若为 wiki 则展示文章内容。

k8s UI

Create a k8s deployment details page to display metadata information (name, namespace, labels, annotations). There is a set of tabs below to display the corresponding pod list, event list, and metrics monitoring chart.

svelte demo

image

create a music web app like this, with an orange theme

A GitHub Pull Request Demo Card

Creat a react component to show a card of a GitHub Pull Request, which must have

  • GitHub Repo Name with project avatar
  • PR Number
  • PR Description
  • Source Branch
  • Target Branch
  • Raised by whom
  • Programming Language
  • A GitHub logo

Just make it a simple, clean and keep everything organized.

ecommerce dashboard

An ecommerce dashboard with a sidebar navigation and a table of recent orders.

Web-based file manager

Build a Web-based file manager

Clean, modern user interface using UI with light and dark modes.
Optimistic, instant UI updates + loading states with query.
Drag n‘ drop local + remote uploads.
Support for individual files and folders
Supports multiple file formats and displays icons according to different types.
Support for compressing, decompressing, moving and copying files

image image

计算器

image

一个写实风格的计算器 UI

test new UI components

create a photo viewer app

use a carousel to display the photos, at least five photos as examples

when clicking the image, open a drawer to show the author, create time, labels

under the carousel, use resizable panels to show photo authors, arrange the names of the authors in alphabetical order
since we have more than 100 authors, display 5 resizable panels per page, and use a pagination UI to control the pages

关于实现原理的一些问题

您好,我是您的b站老粉,对实现原理有一些疑问,想请教下

  1. 我对architecture.md里介绍的“通过分析语法树来修复import 错误” 很感兴趣

After reverse-engineering v0.dev's approach, we've developed a method to correct these issues by analyzing the code's AST.

我去看了实现代码 ,但是我前端水平有限,没太看懂……

能否展开介绍下这部分的原理?

  1. 文档上说生成 JSX 能提高稳定性,能否解释下 why? 意思是“生成静态类型的代码后,方便由工具链做自动验证”,还是“chatgpt 生成 JSX 代码 比生成 js 代码的正确率要高"?

An important learning from v0.dev is to generate entirely static JSX code, which, despite seemingly limiting use cases, significantly improves stability.

感谢!!

mobile app

create a mobile app, looks like discord

photo gallery

Design a personal photography portfolio website.
The first part from top to bottom is the photographer’s nickname and introduction, using a main image to fill in the background. The second part is the photo display wall. The width of the photo is fixed, and the length is a random value after the original image is compressed proportionally. The block of each photo contains a set label. When you click on the image, a secondary page will pop up (including the original image and image introduction). , image tag, contact the author to request the original image button, like button, close secondary page button).

平铺的聊天用户界面

中间是聊天界面,右侧可供选择的AI大模型:ChatGPT, Gemini,下边是输入部分,页面颜色为暗色

A GitHub Pull Request Demo Card

Creat a react component to show a card of a GitHub Pull Request, which must have

  • GitHub Repo Name with project avatar
  • PR Number
  • PR Description
  • Source Branch
  • Target Branch
  • Raised by whom
  • Programming Language
  • A GitHub logo

Just make it a simple, clean and keep everything organized.

a weather app

a weather app looks like the iOS weather app
make the background a blue gradient

平铺的聊天用户界面

中间是聊天界面,右侧可供选择的AI大模型:ChatGPT, Gemini,下边是输入部分,页面颜色为暗色

Restaurant menu

Make this menu with orderable buttons, all styles are included, make this responsive

image

摄影网站

设计一个 个人摄影作品集网站。
从上到下第一部分是摄影师的昵称和介绍,使用一张主图进行背景填充。第二部分是照片展示墙,照片宽度固定,长度为原图按比例压缩后的随机值,每一个照片的block内包含设置的标签,点击图片后弹出二级页面(包括图片原图,图片介绍,图片标签,联系作者索要原图按钮,点赞按钮,关闭二级页面按钮)。第三部分是网站的备案信息。
第二部分中采用瀑布流的形式呈现,并进行lazy load,在滚轮向下滑动时请求新的图片并排版。图片要保持原图的长宽比不变,优先横向排列放置。

a terminal UI

a terminal UI looks like the iterm2 App in MacOS

use mono font

K8s dashboard

create a k8s cluster dashboard, manage multiple resources, display a deployment list in the table, display a deployment detail in a sidebar

前端组件展示网站

创建一个前端组件展示网站。
左侧为菜单,有组件、hook、wiki 几大类,大类中可点击切换具体内容。
右侧展示具体信息,若为组件,则展示简介、基本演示与示例代码、各属性对应的演示与示例代码、属性列表、slot 列表、事件列表;若为 hook,则展示简介、基本演示与示例代码、入参列表、返回值列表。若为 wiki 则展示文章内容。

dark-mode hero section

Create an email client hero component with centered text and images. Remove the image and make it dark mode. Move the image under the text. Add a subtle background pattern and black & white gradient. Use a darker border and gradient on the heading. Make it full height. Clean up text. Regenerate the copy with a catchy headline.

Add a 3 column grid features section in the same style. Remove images from features. Improve features header and descriptions. Improve copy for 3 features for an email app. Add 3 more features. Add subtle borders between features and increase spacing. Refine borders to be more subtle.

Add space between header and features. Add icons matching feature titles. Add rounded borders and center align icons. Add padding to icon containers and reduce icon opacity to blend with background.

vue 终端

创建一个终端 App,类似 MacOS 上的 Iterm2.

节点图可视化页面

创建一个节点图可视化页面。
页面布局为,顶部bar包括上传网络信息、测试、用户登录按钮。
中间为根据后端提供的网络节点拓扑图生成可视化图像,图的边记录两端节点的信息。节点点开后进入二级菜单查看节点信息。
图网络先使用随机生成的节点和边填充。
底部为用户信息介绍。

k8s UI

Create a k8s deployment details page to display metadata information (name, namespace, labels, annotations). There is a set of tabs below to display the corresponding pod list, event list, and metrics monitoring chart.

平铺的聊天用户界面

中间是聊天界面,右侧可供选择的AI大模型:ChatGPT, Gemini,下边是输入部分,页面颜色为暗色

个人摄影作品集网站

设计一个 个人摄影作品集网站。
从上到下第一部分是摄影师的昵称和介绍,使用一张主图进行背景填充。第二部分是照片展示墙,照片宽度固定,长度为原图按比例压缩后的随机值,每一个照片的block内包含设置的标签,点击图片后弹出二级页面(包括图片原图,图片介绍,图片标签,联系作者索要原图按钮,点赞按钮,关闭二级页面按钮)。第三部分是网站的备案信息。
第二部分中采用瀑布流的形式呈现,并进行lazy load,在滚轮向下滑动时请求新的图片并排版。图片要保持原图的长宽比不变,优先横向排列放置。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.