SlideShare a Scribd company logo
KISSY Editor 设计(2)
          yiminghe@gmail.com
       kissyteam@weibo,twitter
              yiminghe@twitter

              2012.06.25 Draft
大纲
• 1. KISSY Editor 简介

• 2. 编辑器基本原理

• 3. KISSY Editor 实践
  – 3.1 API
  – 3.2 设计
  – 3.4 使用
KISSY Editor ?
KISSY Editor



又一个开源的可视化编辑器


底层以及 UI 基于 KISSY 框架


编辑核心算法借鉴 CKEditor


应用于淘宝商品发布/店铺装修/论坛/….
KISSY Editor
KISSY Editor
• Toggle Button



• Select
KISSY Editor
• Overlay




• ContextMenu
KISSY Editor
• Bubble
编辑器基本原理
编辑器基本原理
• contentEditable
• designMode

• 使某个元素可编辑
  – Iframe.contentWindow.document.body.conten
    tEditable = true

• http://www.w3.org/TR/html5/editing.html#attr-
  contenteditable
编辑器基本原理
• document.execCommand
编辑器基本原理
• Range/Selection
  – IE (<=8)
    • Selection: http://msdn.microsoft.com/en-
      us/library/ie/ms535869(v=vs.85).aspx
       – createRange/clear/empty


    • Range: http://msdn.microsoft.com/en-
      us/library/ie/ms535872(v=vs.85).aspx
       – compareEndPoints/move/select/parentElement
编辑器基本原理
• Range/Selection
  – W3c
  – http://www.w3.org/TR/DOM-Level-2-
    Traversal-Range/ranges.html
  – Selection
    • rangeCount/getRangeAt/addRange/removeRange
  – Range
    • startContainer/startOffset/endContainer/endOffset
编辑器基本原理
编辑器基本原理
• 根据规范由 javascript 实现浏览器内置的编
  辑算法
 – http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

                       Body


        P         P                   p


        12        34          56   strong      89


                                      7
编辑器基本原理
• 编辑 api
  – 加粗
  – xhtml DTD
                            Body


               P              P               p


           1       strong   strong   strong       9


                     2       34      5678
编辑器基本原理
• 编辑 api
  – 标题 h1


                   p


            123   strong   789


                   456
编辑器基本原理
• 编辑 api
  – 标题 h1


                  h1


            123   strong   789


                   456
其他兼容性问题
• Copy/paste     <font face="宋体"></font><p
                 style="margin: 0cm 0cm 0pt;"
  – Word         class="MsoNormal"><span lang="EN-
                 US"><font face="Calibri">123<b
                 style="mso-bidi-font-weight:
                 normal;">456</b>789<?xml:namespace
• Html parser    prefix = o ns = "urn:schemas-microsoft-
                 com:office:office"
                 /><o:p></o:p></font></span></p><font
                 face="宋体"></font>



  123456789
                 <p>123<strong>456</strong>789</p>
其他兼容性问题
• 换行
 – P / Br ?
                   table


                    tr


                    td


                  123456
其他兼容性问题
• 图片选择
 – 输入内容
   • IE/firefox/chrome


• 失去焦点选区丢失
 – IE


• ………
KISSY Editor

• API

• 设计

• 使用
KISSY Editor
• 基于 KISSY
 – 模块化机制
 – 组件基础设施
   •   事件              KISSY Component
   •   属性
   •   方法
   •   生命周期
 – 使用 KISSY UI           KISSY Editor
API
KISSY.use(“editor”, function (S,Editor){
 S.use(“plugin1,plugin2”, function (S,P1,P2){
    new Editor({
    // …
    plugins:[
        new P1({…}), P2
    ]
});});});


不启用自动 combine 时推荐 use ”editor/full”
继承属性
• width/height
  – 高宽(包括工具栏与状态栏)


• focused
  – 是否编辑区起始具备焦点


• prefixCls
  – 编辑器 UI 样式前缀
继承属性
• xclass
  – 组件嵌套时的快速生成

  new Overlay({

   children:[{

        xclass: ’editor’,

        width:500,

        height:500

   }]
  });
继承属性
• srcNode
  – 从已有节点生成编辑器组件



• render
  – 编辑器组件渲染容器
继承属性
• listeners
  – 方便绑定事件
  new Editor({

    listeners:{

     focus: function(){}
  }}).render;



• plugins
  – 添加插件
编辑器属性
• customStyle
  – 作用于编辑区域的特有样式


• customLink
  – 作用于编辑区域的特有样式链接


• attachForm
  – 绑定所属 form submit 事件
编辑器方法
• addButton
  – 添加按钮到工具栏
• addSelect
  – 添加 select 到工具栏


• insertHtml
  – 插入 html 到光标位置
• execCommand
  – 执行自定义命令
设计
Editor & plugins


button   select     menu    overlay           Edit API
                                                               Html
                                                              Parser
           component                   range      selection     &
                                                              xhtml
                                                               dtd
 dom        event          node          ua          base


                            KISSY Loader
模块
• 所有代码都是模块



KISSY.add("editor/range",function(S,DOM){
},{
requires:['dom']
});
懒加载
• 懒加载非初始模块
懒加载
• 使用 KISSY.use


KISSY.add("editor/plugin/image",function(S,DOM){
  xx.on("click",function(){
      S.use("editor/plugin/image/dialog");
  });
});
按需自动 combo
• 仅加载需要的模块
  – 最优的链接数与代码引入大小
KISSY.use("editor",function(){
KISSY.use("editor/plugin/fontSize/,editor/plugin

/fontFamily/",

function(){

// use plugins

});});
按需自动 combo
无障碍
• Aria in KISSY UI
  – Tab 支持
  – 所有功能键盘可访问
  – Aria 标记


• 编辑区域快捷键
插件
• 具备介入组件生命周期能力的普通模块




  createDOM   renderUI    bindUI   syncUI
插件示例
KISSY.add("editor/plugin/bold/index",function(){
 function FontSize(cfg){this.cfg=cfg;}
 FontSize.prototype={
      renderUI:function(editor){
          editor.addButton(...);
      }
 };
 return FontSize;
});
消息通信
• 核心  插件
                                         plugin2
• 插件  插件


editor.fire("selectionChange
");                                      editor
editor.on("selectionChange",
function(){                    plugin3             Plugin1
});
命令系统
• document.execCommand
• editor.execCommand

 editor.execCommand("fontSize","1
 8px");                                        fontFamily

 editor.execCommand("fontFamily",
                                    fontSize                bold
 "kaiti");


 editor.execCommand("bold",true);
                                                editor
单元测试
• 部分核心 jasmine
单元测试
describe("cloneContents", function () {


  it(“works for simple text node”, function () {
   var range = new Range(document);
   range.setStart(text, 2);
   range.setEnd(text, 5);
   var f = range.cloneContents();
   var newDiv = KISSY.all("<div>").appendTo("body");
   newDiv.append(f);


   expect(myHtml(newDiv)).toBe("345");
  });
});
使用
引入脚本


<script src='http://a.tbcdn.cn/s/kissy/1.3.0/seed-
min.js'></script>


<!-- or -->

<script src='http://a.tbcdn.cn/s/kissy/1.3.0/kissy-
min.js'></script>
载入模块、插件

// 自动 combo
KISSY.config("combine",true);
// editor 核心/种子文件
KISSY.use("editor",function(S,Editor){
 // editor 插件
 S.use("editor/plugin1,editor/plugin2...",
 function(S,Plugin1,Plugin2){});
});
初始化
• 从已有节点产生
 new Editor({
  width:,
  height:,
  srcNode:'#editor',
  plugins:[
       new Plugin1({..}),
       Plugin2
  ]
 });
初始化
• 全新创建编辑器
 new Editor({
  width:,
  height:,
  render:'#editorContainer',
  plugins:[
       new Plugin1({..}),
       Plugin2
  ]
 });
定制插件
• 实现指定接口的普通模块

•   editor.addButton
•   editor.addSelect
•   editor.execCommand
•   editor.insertHtml
回顾
• 了解 KISSY Editor

• 编辑器基本原理

• KISSY Editor 设计
下一步
• I18n 全球化

• 主题 Theme 架构

• 单元测试完善

• 紧密结合 KISSY UI
KISSY Editor Design 2

More Related Content

What's hot

Composer 套件管理
Composer 套件管理Composer 套件管理
Composer 套件管理
Shengyou Fan
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
 
CRUD 綜合運用
CRUD 綜合運用CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
 
Package安裝與使用
Package安裝與使用Package安裝與使用
Package安裝與使用
Shengyou Fan
 
CRUD 綜合運用
CRUD 綜合運用CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
 
Uliweb设计分享
Uliweb设计分享Uliweb设计分享
Uliweb设计分享
modou li
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
 
HTML 語法教學
HTML 語法教學HTML 語法教學
HTML 語法教學
Shengyou Fan
 
工作坊總結
工作坊總結工作坊總結
工作坊總結
Shengyou Fan
 
Migrations 與 Schema 操作
Migrations 與 Schema 操作Migrations 與 Schema 操作
Migrations 與 Schema 操作
Shengyou Fan
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
Jason Chung
 
應用程式部署
應用程式部署應用程式部署
應用程式部署
Shengyou Fan
 
Package 安裝與使用
Package 安裝與使用Package 安裝與使用
Package 安裝與使用
Shengyou Fan
 
使用 Controller
使用 Controller使用 Controller
使用 Controller
Shengyou Fan
 
開發流程與工具介紹
開發流程與工具介紹開發流程與工具介紹
開發流程與工具介紹
Shengyou Fan
 
Study4.TW .NET Conf 2018 - Fp in c#
Study4.TW .NET Conf 2018  - Fp in c#Study4.TW .NET Conf 2018  - Fp in c#
Study4.TW .NET Conf 2018 - Fp in c#
Chieh Kai Yang
 
使用 Controller
使用 Controller使用 Controller
使用 Controller
Shengyou Fan
 

What's hot (20)

Composer 套件管理
Composer 套件管理Composer 套件管理
Composer 套件管理
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
 
CRUD 綜合運用
CRUD 綜合運用CRUD 綜合運用
CRUD 綜合運用
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
 
Package安裝與使用
Package安裝與使用Package安裝與使用
Package安裝與使用
 
CRUD 綜合運用
CRUD 綜合運用CRUD 綜合運用
CRUD 綜合運用
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
 
Uliweb设计分享
Uliweb设计分享Uliweb设计分享
Uliweb设计分享
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
HTML 語法教學
HTML 語法教學HTML 語法教學
HTML 語法教學
 
工作坊總結
工作坊總結工作坊總結
工作坊總結
 
Migrations 與 Schema 操作
Migrations 與 Schema 操作Migrations 與 Schema 操作
Migrations 與 Schema 操作
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
 
應用程式部署
應用程式部署應用程式部署
應用程式部署
 
Package 安裝與使用
Package 安裝與使用Package 安裝與使用
Package 安裝與使用
 
使用 Controller
使用 Controller使用 Controller
使用 Controller
 
開發流程與工具介紹
開發流程與工具介紹開發流程與工具介紹
開發流程與工具介紹
 
Study4.TW .NET Conf 2018 - Fp in c#
Study4.TW .NET Conf 2018  - Fp in c#Study4.TW .NET Conf 2018  - Fp in c#
Study4.TW .NET Conf 2018 - Fp in c#
 
使用 Controller
使用 Controller使用 Controller
使用 Controller
 

Similar to KISSY Editor Design 2

使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
 
a glance of Javascript module
a glance of Javascript modulea glance of Javascript module
a glance of Javascript module
zipeng zhang
 
Kissy design
Kissy designKissy design
Kissy design
yiming he
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
pan weizeng
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
 
ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
Will Huang
 
Simple kissy1.3
Simple kissy1.3Simple kissy1.3
Simple kissy1.3
yiming he
 
Kissy editor开发与设计
Kissy editor开发与设计Kissy editor开发与设计
Kissy editor开发与设计
yiming he
 
4. Go 工程化实践-0124-v2.pdf
4. Go 工程化实践-0124-v2.pdf4. Go 工程化实践-0124-v2.pdf
4. Go 工程化实践-0124-v2.pdf
ssuserd6c7621
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
Will Huang
 
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
luolonghao
 
Template mb-kao
Template mb-kaoTemplate mb-kao
Template mb-kao
xwcoder
 
kissy@2013
kissy@2013kissy@2013
kissy@2013
yiming he
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
yiming he
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Bo-Yi Wu
 

Similar to KISSY Editor Design 2 (20)

使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 
a glance of Javascript module
a glance of Javascript modulea glance of Javascript module
a glance of Javascript module
 
Kissy design
Kissy designKissy design
Kissy design
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
 
ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
 
Simple kissy1.3
Simple kissy1.3Simple kissy1.3
Simple kissy1.3
 
Kissy editor开发与设计
Kissy editor开发与设计Kissy editor开发与设计
Kissy editor开发与设计
 
4. Go 工程化实践-0124-v2.pdf
4. Go 工程化实践-0124-v2.pdf4. Go 工程化实践-0124-v2.pdf
4. Go 工程化实践-0124-v2.pdf
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
 
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
 
Berserk js
Berserk jsBerserk js
Berserk js
 
Template mb-kao
Template mb-kaoTemplate mb-kao
Template mb-kao
 
kissy@2013
kissy@2013kissy@2013
kissy@2013
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
 
Osgi Intro
Osgi IntroOsgi Intro
Osgi Intro
 

More from yiming he

kissy 1.5 progress
kissy 1.5 progresskissy 1.5 progress
kissy 1.5 progress
yiming he
 
kissy at alibaba
kissy at alibabakissy at alibaba
kissy at alibaba
yiming he
 
kissy modularization part2
kissy modularization part2kissy modularization part2
kissy modularization part2
yiming he
 
kissy modularization part1
kissy modularization part1kissy modularization part1
kissy modularization part1
yiming he
 
KISSY @ 2013-2
KISSY @ 2013-2KISSY @ 2013-2
KISSY @ 2013-2
yiming he
 
KISSY 1.4.0 released
KISSY 1.4.0 releasedKISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
 
callSuper in kissy
callSuper in kissycallSuper in kissy
callSuper in kissy
yiming he
 
KISSY XTemplate
KISSY XTemplateKISSY XTemplate
KISSY XTemplate
yiming he
 
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
yiming he
 
Kissy component system
Kissy component systemKissy component system
Kissy component system
yiming he
 
KISSY@2013.05
KISSY@2013.05KISSY@2013.05
KISSY@2013.05
yiming he
 
kissy@2013.03
kissy@2013.03 kissy@2013.03
kissy@2013.03
yiming he
 
KISSY 1.3-released
KISSY 1.3-releasedKISSY 1.3-released
KISSY 1.3-released
yiming he
 
Hujs 总结
Hujs 总结Hujs 总结
Hujs 总结
yiming he
 
Kissy in-progress
Kissy in-progressKissy in-progress
Kissy in-progress
yiming he
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practice
yiming he
 
KISSY Component API Design
KISSY Component API DesignKISSY Component API Design
KISSY Component API Design
yiming he
 
Kissy autocomplete
Kissy autocompleteKissy autocomplete
Kissy autocomplete
yiming he
 
KISSY_Component
KISSY_ComponentKISSY_Component
KISSY_Component
yiming he
 
kissy-past-now-future
kissy-past-now-futurekissy-past-now-future
kissy-past-now-future
yiming he
 

More from yiming he (20)

kissy 1.5 progress
kissy 1.5 progresskissy 1.5 progress
kissy 1.5 progress
 
kissy at alibaba
kissy at alibabakissy at alibaba
kissy at alibaba
 
kissy modularization part2
kissy modularization part2kissy modularization part2
kissy modularization part2
 
kissy modularization part1
kissy modularization part1kissy modularization part1
kissy modularization part1
 
KISSY @ 2013-2
KISSY @ 2013-2KISSY @ 2013-2
KISSY @ 2013-2
 
KISSY 1.4.0 released
KISSY 1.4.0 releasedKISSY 1.4.0 released
KISSY 1.4.0 released
 
callSuper in kissy
callSuper in kissycallSuper in kissy
callSuper in kissy
 
KISSY XTemplate
KISSY XTemplateKISSY XTemplate
KISSY XTemplate
 
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
 
Kissy component system
Kissy component systemKissy component system
Kissy component system
 
KISSY@2013.05
KISSY@2013.05KISSY@2013.05
KISSY@2013.05
 
kissy@2013.03
kissy@2013.03 kissy@2013.03
kissy@2013.03
 
KISSY 1.3-released
KISSY 1.3-releasedKISSY 1.3-released
KISSY 1.3-released
 
Hujs 总结
Hujs 总结Hujs 总结
Hujs 总结
 
Kissy in-progress
Kissy in-progressKissy in-progress
Kissy in-progress
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practice
 
KISSY Component API Design
KISSY Component API DesignKISSY Component API Design
KISSY Component API Design
 
Kissy autocomplete
Kissy autocompleteKissy autocomplete
Kissy autocomplete
 
KISSY_Component
KISSY_ComponentKISSY_Component
KISSY_Component
 
kissy-past-now-future
kissy-past-now-futurekissy-past-now-future
kissy-past-now-future
 

Recently uploaded

【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
Yen-lung Tsai
 
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
Yen-lung Tsai
 
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
Edward Kuo
 
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
Yen-lung Tsai
 
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
arrogancepchzxp
 
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
Yen-lung Tsai
 

Recently uploaded (6)

【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
【炎龍老師的 AI 模組課程】03 和 AI PK 誰比較會認 IVE 成員: Contrastive Learning、人臉辨識
 
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
【炎龍老師的 AI 模組課程】02 用遷移式學習做八哥辨識: CNN 的原理、用名門 CNN 模型作遷移式學習
 
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
DevOpsDays Taipei 2024 DevOps加入Biz讓DevOps在企業價值定位
 
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
【炎龍老師的 AI 模組課程】04 打造自己的 ChatGPT: 文字生成 AI 的原理、LLM 為什麼這麼厲害、OpenAI API
 
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
下载软件看app观看【网芷:ht28.co】带反差小姨子开房>>>[网趾:ht28.co】]<<<
 
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
【炎龍老師的 AI 模組課程】01 用全連結神經網路打造手寫辨識 AI: AI 原理與 MNIST 數據集
 

KISSY Editor Design 2