```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2F1eCs0yTHGaCJWperj04y%2Fe436059e-18aa-4ba0-b0fa-aeae7f568dd2.jpg?alt=media&token=e743c10e-e5f7-4b9f-9624-52629cc3bedc","id":"e436059e-18aa-4ba0-b0fa-aeae7f568dd2","width":3840,"height":2043,"filename":"bgbg.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**About this plugin**\
\
FontDetector is a tool powered by myself and GPT-4, designed to help you view web fonts by hovering text. You can easily explore your favorite font families, weights, sizes, letter spacing, line heights, and text alignments.

The code has been written by GPT-4, and all I did was tell it my requirements in Chinese.

**How it works**\
\
FontDetector simplifies the tedious process of determining fonts as you browse the web. No more switching between windows or searching through lines of code. Just hover over a font you like, and within three seconds you'll have the font name, saving a ton of time!

Hover, detect, select. As easy as 1-2-3. An essential tool for any web designer or front-end developer.\
\
[Plugin ↗️](https://chrome.google.com/webstore/detail/fontdetector/jphgedmdokkhlllaibcbndaccmdcckfe)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2F1eCs0yTHGaCJWperj04y%2F0f8c8165-7403-4bc5-a79a-f4b88712bda3.mp4?alt=media&token=1b39c19a-bb64-41f3-a6c6-1a0b9d34d67b","id":"0f8c8165-7403-4bc5-a79a-f4b88712bda3","width":1280,"height":932,"filename":"ddd.mp4","type":"video/mp4","caption":"How to use it","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2F1eCs0yTHGaCJWperj04y%2Fe5af4e62-81f2-4411-9451-2a3f77ddc09e.png?alt=media&token=8dfc8ef2-cd12-4011-88c8-975bf2918e53","id":"e5af4e62-81f2-4411-9451-2a3f77ddc09e","width":1650,"height":2184,"filename":"ray-so-export.png","type":"image/png","caption":"Partial code","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ffontdetector%2F8f372358-d78f-4a11-9552-2d7ffa231c28.png?alt=media&token=cb05bb97-6293-4bc4-9607-b4ec8c27fcef","id":"8f372358-d78f-4a11-9552-2d7ffa231c28","width":1500,"height":820,"filename":"post-49035a34-e687-42e2-bd89-44d6ff895b90.png","type":"image/png","caption":"Featured by Google Web Store","border":false}]}
```

FontDetector

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2Fd49cbb30-6d5e-4ad4-a4c6-4686d5d399ca.mp4?alt=media&token=dd09d77c-14da-4d88-ad97-0462d931dca8","id":"d49cbb30-6d5e-4ad4-a4c6-4686d5d399ca","width":1692,"height":1080,"filename":"ai.mp4","type":"video/mp4","caption":"AFFiNE AI website","border":false}]}
```

[AFFiNE AI](http://ai.affine.pro) has been officially released. The goal of AFFiNE AI is to help users complete tasks more efficiently in their work and writing flow through AI. We do not want AI to be a standalone shell; instead, we hope it can integrate into the product, become a part of the product, and make AI no longer deliberate or require cumbersome switching between different AI products.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F951b6f83-02c9-4adc-a5b1-d973bd9b8ee0.jpg?alt=media&token=6a7577d1-c4fb-4582-830f-9b4c5f442b53","id":"951b6f83-02c9-4adc-a5b1-d973bd9b8ee0","width":2540,"height":1520,"filename":"pic1.jpg","type":"image/jpeg","caption":"AI thumbnail","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F98aefb95-2fa7-45ab-8d4d-db8250ea152d.jpg?alt=media&token=d85a056c-d9cf-4604-878a-abebd5b4bcd6","id":"98aefb95-2fa7-45ab-8d4d-db8250ea152d","width":2540,"height":1520,"filename":"pic 9.jpg","type":"image/jpeg","caption":"Chat AI","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F76489507-1a78-4493-8f77-0f7b08b51693.jpg?alt=media&token=c7ee8929-3439-4896-8443-5bae96637efe","id":"76489507-1a78-4493-8f77-0f7b08b51693","width":2540,"height":1520,"filename":"pic 10.jpg","type":"image/jpeg","caption":"Inline AI","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F1d859159-a7ae-416a-b907-d1bbef886c3b.jpg?alt=media&token=0b7f7ea1-b11a-404c-a17d-16fcc3ad4bf0","id":"1d859159-a7ae-416a-b907-d1bbef886c3b","width":2540,"height":1520,"filename":"pic 11.jpg","type":"image/jpeg","caption":"Generating mind map","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F68c39e7e-2ec8-4930-8994-0d9ad31ea28a.jpg?alt=media&token=c58794e2-7139-4d3a-a080-f4466f4af571","id":"68c39e7e-2ec8-4930-8994-0d9ad31ea28a","width":2540,"height":1520,"filename":"pic 12.jpg","type":"image/jpeg","caption":"Generating presentation","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F74da38cd-768d-4b78-8636-c6172fbdc606.jpg?alt=media&token=7bb45ccd-cb52-4523-aa10-5f55f562462b","id":"74da38cd-768d-4b78-8636-c6172fbdc606","width":2540,"height":1520,"filename":"pic 13.jpg","type":"image/jpeg","caption":"Make it real","border":false}]}
```

This update is divided into several sections:

Chat AI: You can use AFFiNE to converse with AI. Due to AFFiNE's unique properties, AI supports generating various "blocks" within AFFiNE AI. Documents, spreadsheets, even whiteboards, or any area of a webpage can become part of your conversation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2F7308b806-e76d-446b-b133-5eeffe1ea905.mp4?alt=media&token=81167117-926f-4690-a9be-4cbb40338c18","id":"7308b806-e76d-446b-b133-5eeffe1ea905","width":1684,"height":1080,"filename":"chat.mp4","type":"video/mp4","caption":"Chat with AI","border":false}]}
```

AFFiNE AI can help you formulate ideas, translate, summarize your materials, or simply proofread and perfect your tone, providing you with comprehensive services.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2Fae012d1b-54b7-4259-9ee1-2c897f9fed41.mp4?alt=media&token=47550c08-f182-432b-beaf-01f1ff4ee47d","id":"ae012d1b-54b7-4259-9ee1-2c897f9fed41","width":1684,"height":1080,"filename":"inline.mp4","type":"video/mp4","caption":"Inline AI","border":false}]}
```

We have also put a lot of effort into the whiteboard function. AFFiNE has always been committed to being a good tool for thinking and knowledge management. Now, when you can ask AI to help you connect thoughts, writing, and planning, turning them into clear mind maps or slides, it is more convenient to use.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FERoN1u1zIEizuOpCipul%2Fb381db79-401d-459c-921d-39a85d443cf5.mp4?alt=media&token=c00f2e92-164f-4560-a9c8-e0a54c01dd86","id":"b381db79-401d-459c-921d-39a85d443cf5","width":1048,"height":720,"filename":"whitebboard.mp4","type":"video/mp4","caption":"Whiteboard AI","border":false}]}
```

We have put a lot of effort into making AFFiNE AI a reality from an idea, so many features are still in the Beta stage. If the AI-generated results are not particularly ideal, please do not worry. We will continue to optimize and make AI understand you better. 

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Faffineai%2F4d28334e-f663-4b47-9f19-101d8567c16d.mp4?alt=media&token=6a50bf92-71df-4b0a-880a-ac0f2a2525f7","id":"4d28334e-f663-4b47-9f19-101d8567c16d","width":1684,"height":1080,"filename":"makeItReal.mp4","type":"video/mp4","caption":"Make it real","border":false}]}
```

\
Furthermore, we have more concrete plans for the development of AFFiNE AI, including features like RAG that make AI understand you better, as well as some experience-level optimizations. Please stay tuned.

[In the end, let's put our marketing video here](https://www.youtube.com/watch?v=l0N-6vTf9nY)

[Live and try it here AFFiNE AI](http://ai.affine.pro)

AFFiNE AI

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F994a95c0-ef86-4fff-af30-93dcf5134ace.jpg?alt=media&token=2e17fa9b-eda6-4766-94f1-2938cbf360ca","id":"994a95c0-ef86-4fff-af30-93dcf5134ace","width":4096,"height":2816,"filename":"ProDisplayXDR-02 1.jpg","type":"image/jpeg","caption":"","border":false}]}
```

The new [AFFiNE](https://AFFiNE.pro) official website has been launched, this time we've updated to a white version, hoping to discard the overly technical first impression from before. We hope everyone will like it. Some content is still being synchronized, and more updates will follow.

**Hero Image**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F5a291c99-d0ed-42e2-823a-8c92b8aaddac.png?alt=media&token=cafe111e-10db-4688-9c36-0d964773efad","id":"5a291c99-d0ed-42e2-823a-8c92b8aaddac","width":2620,"height":1038,"filename":"截屏2023-11-10 13.37.08.png","type":"image/png","caption":"","border":false}]}
```

The new version of the website primarily aims to discard the highly technical tone of the previous one. Since AFFiNE, as a note-taking tool, is intended not to be limited to developers, this is the core element in our redesign.

Here, a mix of fonts is used to emphasize the diversity of AFFiNE's product features, while the 3D icons also serve to make the overall product more approachable and lively.\
\
**[Promotion Video](https://x.com/layers_to/status/1715789152585707803?s=20)**

```cv
tweet
https://twitter.com/layers_to/status/1715789152585707803?s=20
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2Fbc033d56-9945-42e8-b9a4-ca568e42a835.mp4?alt=media&token=2075d6a9-bc18-440e-9c03-db52ae2d10ec","id":"bc033d56-9945-42e8-b9a4-ca568e42a835","width":2160,"height":1500,"filename":"11.mp4","type":"video/mp4","caption":"","border":false}]}
```

Because AFFiNE is not very well-known (although it has already received 23k Stars on [GitHub](https://github.com/toeverything/AFFiNE)), we plan to use videos on our official website to quickly help users understand what AFFiNE is for.

1. We're using [matter.js](https://github.com/liabru/matter-js) to achieve the effects

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F20cdb851-c2d8-4fd3-b0c3-f5db229b1cda.mp4?alt=media&token=07890c7b-7bf8-496d-a4ef-e69801012fef","id":"20cdb851-c2d8-4fd3-b0c3-f5db229b1cda","width":1446,"height":1454,"filename":"33.mp4","type":"video/mp4","caption":"","border":false}]}
```

2. Also we're using json :D

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F6ce180b7-fb6c-4090-9c86-31940548ff12.mp4?alt=media&token=ba22f8ff-4189-4be4-9e05-13d59d770a81","id":"6ce180b7-fb6c-4090-9c86-31940548ff12","width":2846,"height":1622,"filename":"json.mp4","type":"video/mp4","caption":"","border":false}]}
```

Due to time limitations, some aspects have not yet achieved perfection. We plan to refine these in the upcoming iterations

See it live at: https://affine.pro

AFFiNE's V3 website

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FqWFdA7KCcol1CGw0zYKK%2F13f065c8-be8c-4de3-846c-75109cbe4c6a.jpg?alt=media&token=7fa27092-2f26-4813-bf6b-55e633f395d0","id":"13f065c8-be8c-4de3-846c-75109cbe4c6a","width":4522,"height":3231,"filename":"logo.jpg","type":"image/jpeg","caption":"logo variants","border":false}]}
```

We have open sourced the design files for the [AFFiNE](https://affine.pro) logo at [figma](https://www.figma.com/community/file/1260248555835307433).

```cv
figma
{"url":"https://www.figma.com/file/xNe6JJtZB6UNIYNEvW3CYP/AFFiNE-LOGO-(Community)?type=design&node-id=0%3A1&mode=design&t=oEbTc11phHtQlEEi-1"}
```

AFFiNE Logo Concept