Home

Awesome

<div align="center"><a name="readme-top"></a> <img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp"> <img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg"> <img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji-anim/1.0.0/files/assets/teddy-bear.webp">

Lobe Vidol

Experience the magic of virtual idol creation with Lobe Vidol. Enjoy our exquisite UI design, support for MMD dance content, and seamless conversations with characters—all integrated into one cohesive platform.

<sup>Anyone can create a virtual idol</sup>

English · 简体中文 · 日本語 · Docs · Changelog · Report Bug · Request Feature

<br/> <br>

</div>

[!NOTE] Lobe Vidol is currently in the early stages of development and is now open for Beta testing. We welcome you to join us and contribute!

<details> <summary><kbd>Table of Contents</kbd></summary>

TOC

</details>

👋🏻 Getting Started & Community

Lobe Vidol is actively under development. If you have any requests or questions, feel free to submit [issues][issues-link].

No installation or registration required! Visit our website for a quick experience.
Join our Discord community! This is where you can interact with developers and other enthusiastic LobeHub users.

[!IMPORTANT]

Star the project to receive all release notifications from GitHub without delay!~⭐️

<img width="1749" alt="star (1)" src="https://github.com/user-attachments/assets/73f96340-ef2b-4d9b-ab6f-71f30c0c02fb"> <details><summary><kbd>Star History</kbd></summary> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=lobehub%2Flobe-vidol&theme=dark&type=Date"> <img src="https://api.star-history.com/svg?repos=lobehub%2Flobe-vidol&type=Date"> </picture> </details> <div align="right">

</div>

✨ Feature Overview

1. Smooth Conversational Experience

Streamed responses provide a smooth conversational experience. You can set the dialogue context by placing character actions and expressions in parentheses () and the ongoing events or scenes in square brackets [] to create an immersive experience.

<img width="1291" alt="fluent chat experience" src="https://github.com/user-attachments/assets/6b3a2df4-c80e-4cb4-8d62-c6c5532d0f00">

2. Background Context Setting

You can enhance the dialogue by setting a background image that fits the context:

<img width="1318" alt="background setting" src="https://github.com/user-attachments/assets/e62b635c-168d-4f4e-8741-39aac0f7cfd3">

3. Rich Library of Actions and Poses

With a built-in library of Mixamo character actions and poses, you can have characters strike the desired poses or perform actions during conversations:

<img width="1323" alt="motions and postures" src="https://github.com/user-attachments/assets/95d9a42e-4215-45f2-8171-f631a91065c9">

4. Elegant UI Design

The meticulously designed interface features an elegant appearance and smooth interaction effects, supporting both light and dark themes, and is optimized for mobile devices. It also supports PWA, providing an experience closer to that of a native application.

<img width="1408" alt="ui design" src="https://github.com/user-attachments/assets/e55df3c0-4e7b-4b5d-b903-e5865498da7a">

5. Rich Character Editing Experience

Using the character editor, you can create your own virtual idol, set touch responses, upload VRM models to the site, and interact with them.

<img width="1291" alt="role edit" src="https://github.com/user-attachments/assets/3d319554-ae14-4932-b527-e220c910fd51">

6. MMD Dance Support

With the support of mmd-parser, you can dance with your favorite idols using vmd files; Just Dance!

https://github.com/user-attachments/assets/c017be86-dbac-4ce1-9f00-a10248b58621

7. PMX Stage Loading Feature

We have added a stage loading feature with a rich selection of stages, allowing characters to dance with different stage styles:

<img width="1317" alt="pmx stage" src="https://github.com/user-attachments/assets/ec436b96-c270-431a-acef-f140584e6938">

8. Touch Response Feature

By clicking on different body parts of the character, they will respond differently. You can also edit the character's touch responses to create unique interactive effects:

https://github.com/user-attachments/assets/a283bca0-222c-4ac8-8757-8c56ce3873c2

9. Character Marketplace

The LobeVidol character marketplace gathers a variety of meticulously designed characters, allowing you to experience different contexts and interactions, providing a unique companionship experience. Our marketplace is not just a display platform but a collaborative space where everyone can contribute their imagination and share their personally designed characters.

[!TIP]

With the character creation feature, you can easily submit your character creations to our platform. We emphasize that LobeVidol has established a sophisticated automated internationalization (i18n) workflow, which seamlessly converts your characters into multiple language versions. This means that regardless of the language your users speak, they can experience your characters without barriers.

<img width="1320" alt="discover" src="https://github.com/user-attachments/assets/9f155227-6856-4957-9f6e-a9b3f534df24">

10. Dance Marketplace

The LobeVidol dance marketplace features a rich collection of MMD dance resources, creating a wealth of visual experiences. You can combine different characters, stages, music, and dances to create a unique viewing experience.

<img width="1323" alt="Snipaste_2024-11-05_21-22-47" src="https://github.com/user-attachments/assets/684ba6ad-17a9-4af3-9943-fcaaee121216">

11. TTS & STT Voice Conversations

LobeVidol supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text information into clear voice output. Users can interact with our conversational assistant as if they were talking to a real person. Users can choose from a variety of voices to match their assistant with the appropriate sound source. Additionally, for those who prefer auditory learning or want to obtain information while busy, TTS provides an excellent solution.

In LobeVidol, we have carefully selected a range of high-quality voice options (OpenAI Audio, Microsoft Edge Speech) to meet the needs of users from different regions and cultural backgrounds. Users can select suitable voices based on personal preferences or specific scenarios to achieve a personalized communication experience.

<div align="right">

</div>

📦 Ecosystem

NPMRepositoryDescriptionVersion
@lobehub/uilobehub/lobe-uiAn open-source UI component library designed for building AIGC web applications
@lobehub/iconslobehub/lobe-iconsA collection of SVG logos and icons for mainstream AI / LLM models and companies
@lobehub/ttslobehub/lobe-ttsA React Hooks library for AI TTS / STT voice synthesis / recognition
@lobehub/lintlobehub/lobe-lintLobeHub code style guidelines for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release
<div align="right">

</div>

⌨️ Local Development

You can use GitHub Codespaces for online development:

Or use the following commands for local development:

$ git clone https://github.com/lobehub/lobe-vidol.git
$ cd lobe-vidol
$ bun install
$ bun dev
<div align="right">

</div>

🤝 Contributing

We warmly welcome contributions in various forms. If you're interested in contributing code, please check out our GitHub Issues and [Projects][github-project-link] to showcase your creativity and skills.

<a href="https://github.com/lobehub/lobe-vidol/graphs/contributors" target="_blank"> <table> <tr> <th colspan="2"> <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-vidol"><br><br> </th> </tr> <tr> <td> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_90_days&owner_id=131470832&repo_ids=784800776&image_size=2x3&color_scheme=dark"> <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_90_days&owner_id=131470832&repo_ids=784800776&image_size=2x3&color_scheme=light"> </picture> </td> <td rowspan="2"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_90_days&owner_id=131470832&repo_ids=784800776&image_size=4x7&color_scheme=dark"> <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_90_days&owner_id=131470832&repo_ids=784800776&image_size=4x7&color_scheme=light"> </picture> </td> </tr> <tr> <td> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_90_days&owner_id=131470832&repo_ids=784800776&image_size=2x3&color_scheme=dark"> <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_90_days&owner_id=131470832&repo_ids=784800776&image_size=2x3&color_scheme=light"> </picture> </td> </tr> </table> </a> <div align="right">

</div>

🩷 Community Sponsorship

Every bit of support is incredibly valuable, coming together to form the brilliant galaxy we support! You are like a shooting star that lights up our path forward in an instant. Thank you for your trust — your support acts like a guiding star, repeatedly illuminating the way for the project.

<a href="https://opencollective.com/lobehub" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true"> <img src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true"> </picture> </a> <div align="right">

</div>

🔗 More Tools

More Projects

Related Links

<div align="right">

</div>

📝 License

Copyright © 2024 lobehub. <br /> This project is Apache 2.0 licensed.