Skip to content

Commit c82f4ac

Browse files
wkylinwkylin
committed
feat: interactive book
1 parent 60219ff commit c82f4ac

1 file changed

Lines changed: 122 additions & 99 deletions

File tree

‎src/pages/home/index.jsx‎

Lines changed: 122 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -371,100 +371,123 @@ const Home = () => {
371371
const bookPages = [
372372
{
373373
pageNumber: 1,
374-
title: 'Chapter 1: The Beginning',
374+
title: '第一章：AI Agent 简介',
375375
content: (
376376
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
377-
<p>
378-
"The most important characteristics of good design are discoverability and understanding. Discoverability:
379-
Is it possible to even figure out what actions are possible?"
380-
</p>
381-
<p>
382-
"Understanding: What does it all mean? How is the product supposed to be used? What do all the different
383-
controls and settings mean?"
384-
</p>
385-
<p>
386-
"Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs
387-
so well that the design is invisible."
388-
</p>
377+
<p>"AI Agent 是人工智能领域的一个重要概念，它代表着能够自主执行任务的智能实体。"</p>
378+
<p>"AI Agent 不仅仅是简单的程序，它们能够感知环境、做出决策并采取行动，就像人类一样。"</p>
379+
<p>"在现代科技中，AI Agent 正在改变我们与技术交互的方式，从简单的聊天机器人到复杂的自动化系统。"</p>
380+
</div>
381+
),
382+
backContent: (
383+
<div
384+
style={{
385+
display: 'flex',
386+
flexDirection: 'column',
387+
alignItems: 'center',
388+
justifyContent: 'center',
389+
height: '100%',
390+
textAlign: 'center',
391+
}}
392+
>
393+
<p style={{ fontStyle: 'italic', color: '#9ca3af', marginBottom: '8px' }}>翻到下一页，探索更多...</p>
394+
<p style={{ fontSize: '0.9rem', color: '#6b7280' }}>下一章：AI Agent 的工作原理</p>
389395
</div>
390396
),
391397
},
392398
{
393399
pageNumber: 2,
394-
title: 'Chapter 2: The Psychology',
400+
title: '第二章：AI Agent 的工作原理',
395401
content: (
396402
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
397-
<p>
398-
"When people try to use something, they first form a goal, then they plan an action, then they execute the
399-
action. Then they perceive what happened, interpret the result, and compare it with the goal."
400-
</p>
401-
<p>"This is the seven stages of action. It forms the core of human-computer interaction psychology."</p>
402-
<p>
403-
"The gulf of execution is the gap between the user's intentions and the allowable actions. The gulf of
404-
evaluation is the gap between the system's representation and the user's expectations."
405-
</p>
403+
<p>"AI Agent 的核心是感知-决策-行动循环。它首先通过传感器或输入接口感知环境。"</p>
404+
<p>"然后使用算法和模型分析信息，做出最佳决策。"</p>
405+
<p>"最后，通过执行器或输出接口采取行动。这个循环不断重复，使 Agent 能够适应变化的环境。"</p>
406+
</div>
407+
),
408+
backContent: (
409+
<div
410+
style={{
411+
display: 'flex',
412+
flexDirection: 'column',
413+
alignItems: 'center',
414+
justifyContent: 'center',
415+
height: '100%',
416+
textAlign: 'center',
417+
}}
418+
>
419+
<p style={{ fontStyle: 'italic', color: '#9ca3af', marginBottom: '8px' }}>翻到下一页，探索更多...</p>
420+
<p style={{ fontSize: '0.9rem', color: '#6b7280' }}>下一章：AI Agent 的类型</p>
406421
</div>
407422
),
408423
},
409424
{
410425
pageNumber: 3,
411-
title: 'Chapter 3: Knowledge',
426+
title: '第三章：AI Agent 的类型',
412427
content: (
413428
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
414-
<p>
415-
"Knowledge is in the head and in the world. Precise behavior can emerge from imprecise knowledge for four
416-
reasons:"
417-
</p>
429+
<p>"AI Agent 可以分为多种类型：反应型 Agent、 deliberation Agent、混合型 Agent 等。"</p>
418430
<ul
419431
style={{ listStyleType: 'disc', paddingLeft: '20px', display: 'flex', flexDirection: 'column', gap: '8px' }}
420432
>
421-
<li>Information is in the world</li>
422-
<li>Great precision is not required</li>
423-
<li>Natural constraints are present</li>
424-
<li>Cultural constraints are present</li>
433+
<li>反应型 Agent：基于当前感知做出反应</li>
434+
<li>Deliberation Agent：具有规划和推理能力</li>
435+
<li>学习型 Agent：能够从经验中学习和改进</li>
436+
<li>多 Agent 系统：多个 Agent 协同工作</li>
425437
</ul>
426-
<p>
427-
"The principle of mapping: The relationship between controls and their effects should be clear and
428-
consistent."
429-
</p>
438+
<p>"每种类型的 Agent 都有其独特的优势和应用场景。"</p>
439+
</div>
440+
),
441+
backContent: (
442+
<div
443+
style={{
444+
display: 'flex',
445+
flexDirection: 'column',
446+
alignItems: 'center',
447+
justifyContent: 'center',
448+
height: '100%',
449+
textAlign: 'center',
450+
}}
451+
>
452+
<p style={{ fontStyle: 'italic', color: '#9ca3af', marginBottom: '8px' }}>翻到下一页，探索更多...</p>
453+
<p style={{ fontSize: '0.9rem', color: '#6b7280' }}>下一章：AI Agent 的应用领域</p>
430454
</div>
431455
),
432456
},
433457
{
434458
pageNumber: 4,
435-
title: 'Chapter 4: Constraints',
459+
title: '第四章：AI Agent 的应用领域',
436460
content: (
437461
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
438-
<p>
439-
"Constraint: specific limits on possible actions. Constraints guide our behavior by limiting the possible
440-
options."
441-
</p>
442-
<p>
443-
"Physical constraints rely on the properties of the physical world for their operation. Semantic constraints
444-
rely on the meaning of the situation."
445-
</p>
446-
<p>
447-
"Cultural constraints are learned conventions that constrain our behavior. Logical constraints rely on the
448-
reasoning that certain actions are possible."
449-
</p>
462+
<p>"AI Agent 在各个领域都有广泛应用，从日常生活到工业生产。"</p>
463+
<p>"在医疗领域，AI Agent 可以帮助诊断疾病、制定治疗方案。在金融领域，它们可以进行风险评估和投资建议。"</p>
464+
<p>"在交通领域，自动驾驶汽车就是一种复杂的 AI Agent。在娱乐领域，游戏中的 NPC 也越来越智能化。"</p>
465+
</div>
466+
),
467+
backContent: (
468+
<div
469+
style={{
470+
display: 'flex',
471+
flexDirection: 'column',
472+
alignItems: 'center',
473+
justifyContent: 'center',
474+
height: '100%',
475+
textAlign: 'center',
476+
}}
477+
>
478+
<p style={{ fontStyle: 'italic', color: '#9ca3af', marginBottom: '8px' }}>翻到下一页，探索更多...</p>
479+
<p style={{ fontSize: '0.9rem', color: '#6b7280' }}>下一章：AI Agent 的挑战</p>
450480
</div>
451481
),
452482
},
453483
{
454484
pageNumber: 5,
455-
title: 'Chapter 5: Design Principles',
485+
title: '第五章：AI Agent 的挑战',
456486
content: (
457487
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
458-
<p>
459-
"Visibility: The more visible functions are, the more likely users will be able to know what to do next."
460-
</p>
461-
<p>
462-
"Feedback: Feedback must be immediate, informative, and clear. It should also be as obvious as possible."
463-
</p>
464-
<p>
465-
"Affordance: The perceived and actual properties of the thing that determine how the thing could possibly be
466-
used."
467-
</p>
488+
<p>"尽管 AI Agent 技术发展迅速，但仍面临诸多挑战。"</p>
489+
<p>"安全性是首要问题，如何确保 Agent 的行为符合人类价值观？"</p>
490+
<p>"可解释性：Agent 的决策过程往往像黑箱，如何让人类理解其推理过程？"</p>
468491
</div>
469492
),
470493
backContent: (
@@ -479,43 +502,46 @@ const Home = () => {
479502
}}
480503
>
481504
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '16px', color: '#6b7280' }}>
482-
Design Principles
505+
AI Agent 的挑战
483506
</h3>
484-
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>Continued on next page</p>
507+
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>继续阅读下一页</p>
485508
</div>
486509
),
487510
},
488511
{
489512
pageNumber: 6,
490-
title: 'Chapter 6: Error Prevention',
513+
title: '第六章：AI Agent 的未来发展',
491514
content: (
492515
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
493-
<p>
494-
"Error prevention is the best way to deal with errors. If you can prevent errors from happening, you don't
495-
need to worry about error messages."
496-
</p>
497-
<p>"Four types of errors: slips, mistakes, errors of omission, and errors of commission."</p>
498-
<p>
499-
"Slips are unconscious errors where the user intends to do one thing but does another. Mistakes are
500-
conscious errors where the user has the wrong goal."
501-
</p>
516+
<p>"AI Agent 的未来充满无限可能。随着技术的进步，它们将变得更加智能和自主。"</p>
517+
<p>"多模态 Agent 将能够处理文本、图像、声音等多种信息。"</p>
518+
<p>"通用人工智能 Agent（AGI）可能会实现，能够在各种任务中表现出色。"</p>
519+
</div>
520+
),
521+
backContent: (
522+
<div
523+
style={{
524+
display: 'flex',
525+
flexDirection: 'column',
526+
alignItems: 'center',
527+
justifyContent: 'center',
528+
height: '100%',
529+
textAlign: 'center',
530+
}}
531+
>
532+
<p style={{ fontStyle: 'italic', color: '#9ca3af', marginBottom: '8px' }}>翻到下一页，探索更多...</p>
533+
<p style={{ fontSize: '0.9rem', color: '#6b7280' }}>下一章：AI Agent 的伦理考虑</p>
502534
</div>
503535
),
504536
},
505537
{
506538
pageNumber: 7,
507-
title: 'Chapter 7: Human-Centered Design',
539+
title: '第七章：AI Agent 的伦理考虑',
508540
content: (
509541
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
510-
<p>
511-
"Human-centered design is an approach to problem-solving that starts with people and ends with innovative
512-
solutions that are tailor-made to fit their needs."
513-
</p>
514-
<p>"The process involves three phases: inspiration, ideation, and implementation."</p>
515-
<p>
516-
"Empathy is at the heart of human-centered design. Understanding the people you're designing for is crucial
517-
to creating meaningful solutions."
518-
</p>
542+
<p>"随着 AI Agent 的普及，伦理问题变得越来越重要。"</p>
543+
<p>"我们需要确保 Agent 的行为符合道德标准，避免偏见和歧视。"</p>
544+
<p>"隐私保护、透明度和问责制都是需要重点关注的领域。"</p>
519545
</div>
520546
),
521547
backContent: (
@@ -529,21 +555,18 @@ const Home = () => {
529555
textAlign: 'center',
530556
}}
531557
>
532-
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>The journey of design excellence continues...</p>
558+
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>AI 时代的伦理思考继续...</p>
533559
</div>
534560
),
535561
},
536562
{
537563
pageNumber: 8,
538-
title: 'Conclusion',
564+
title: '结语：拥抱 AI Agent 的时代',
539565
content: (
540566
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
541-
<p>"Design is not just what it looks like and feels like. Design is how it works."</p>
542-
<p>
543-
"The best designs are those that are invisible to the user. They work so well that the user doesn't notice
544-
the design - they just notice that it works."
545-
</p>
546-
<p style={{ fontStyle: 'italic', textAlign: 'center', marginTop: '24px', color: '#6b7280' }}>— Steve Jobs</p>
567+
<p>"AI Agent 不仅仅是技术工具，它们正在重塑我们的世界。"</p>
568+
<p>"通过理解和正确应用 AI Agent，我们可以创造更美好的未来。"</p>
569+
<p style={{ fontStyle: 'italic', textAlign: 'center', marginTop: '24px', color: '#6b7280' }}>— AI 专家</p>
547570
</div>
548571
),
549572
backContent: (
@@ -557,7 +580,7 @@ const Home = () => {
557580
textAlign: 'center',
558581
}}
559582
>
560-
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>End of Book</p>
583+
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>书籍结束</p>
561584
</div>
562585
),
563586
},
@@ -567,14 +590,6 @@ const Home = () => {
567590
<section className={styles.avatar} style={{ margin: '10px 0', fontSize: 24 }}>
568591
<ColorfulText text={`React version: ${version}`} />
569592
</section>
570-
<InteractiveBook
571-
coverImage="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=800"
572-
bookTitle="The Design of Everyday Things"
573-
bookAuthor="Don Norman"
574-
pages={bookPages}
575-
width={350}
576-
height={500}
577-
/>
578593
<section style={{ width: '320px', margin: '30px 0' }}>
579594
<Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
580595
<Flex align="center">
@@ -660,6 +675,14 @@ const Home = () => {
660675
重置验证
661676
</Button>
662677
</section>
678+
<InteractiveBook
679+
coverImage="https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800"
680+
bookTitle="AI Agent 完全指南"
681+
bookAuthor="AI 专家"
682+
pages={bookPages}
683+
width={350}
684+
height={500}
685+
/>
663686
<section style={{ marginBottom: 15, fontSize: 20 }}>
664687
I love <span className={styles.circledHighlight}>coding</span> in{' '}
665688
<AlternatingText alternateText={['JavaScript', 'TypeScript', 'React', 'Vue', 'Remix', 'Node.js']} />.

0 commit comments

Comments
 (0)