Semantic Kernel 工具箱： Semantic Kernel Tools
Posted XBOTTER‘s
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Semantic Kernel 工具箱： Semantic Kernel Tools相关的知识，希望对你有一定的参考价值。
2023年4月13日，Microsoft发布了一个 Semantic Kernel 的 VS Code 插件，Semantic Kernel Tools，用于进行Semantic Function的开发和调试工作。
Semantic Kernel Tools的安装只需要VS Code即可，不需要额外的其他的环境。
在 VS Code的扩展中搜索 Semantic Kernel Tools ，点击 Install 即可。
安装完成之后，侧边栏会多出一个SK的图标，这就是Semantic Kernel Tools。
Semantic Kernel Tools支持在任意项目中开发 Semantic Function，即便是一个空文件夹也可以进行。
点击SK图标，打开Semantic Kernel Tools，如果当前的项目文件夹下有Semantic Function，会自动的检测识别到，如果没有，会提示没有functions，需要开始创建。
这里点击 Create a Function 按钮，开始创建第一个Semantic Function。
首次创建需要选择Skill文件夹，用于存储当前SKill 所有的Semantic Function。
然后提示输入Semantic Function的Name 和 Description。
输入完成确认，就可以看到第一个 Semantic Function 已经创建完成了。
另外，点击 Functions 旁边的 创建文件夹 semantic ui要装啥才能使用
1. 创建 index.html
<html>
<head>
</head>
<body>
<div>
Default
</div>
<div>
<div>
Item A
</div>
<div>
Item B
</div>
<div>
Item C
</div>
</div>
</body>
</html>
现在页面看起来是这样的：
<img src="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_b.png" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_r.png">
2. 下载 CSS 和 JS 文件
Semantic-UI 在 GitHub 上的代码仓库里，有准备好的 CSS 和 JS 文件供下载： https://github.com/Semantic-Org/Semantic-UI/tree/master/dist
<img src="https://pic4.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_b.png" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original="https://pic4.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_r.png">
我们目前需要的是 semantic.min.css 和 semantic.min.js 这两个文件，将它们加入到 HTML 的头部：
<head>
<link href="./semantic.min.css" rel="stylesheet" type="text/css">
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
</head>
你会发现中间多了一个 jquery.min.js，没错，如果你要使用 Semantic-UI 涉及 JavaScript 的高级功能，比如 tab, progress, sticky, API 等，就必须加上 jQuery 库，这是 Semantic-UI 所需要的全部依赖。
这里是一个 jQuery 的链接： https://code.jquery.com/jquery-3.1.1.min.js
3. 为 div 元素设定 ui 类
<body>
<div class="ui button">
Default
</div>
<div class="ui menu">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</div>
</body>
然后去浏览器刷新一下，可以看到：
<img src="https://pic3.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_b.png" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.png">
聪明的你会发现，”ui button” 就代表一个按钮，而“ui menu” 是一个菜单，以此类推，”ui label” 是标签，”ui input” 是输入框，等等。所以使用 Semantic-UI 时，最重要的魔法关键词就是 “ui”。
现在的目录结构(文件夹)也十分直观，易于理解：
<img src="https://pic4.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_b.png" data-rawwidth="2864" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic4.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_r.png">
这一个例子展示了如何从零开始使用 Semantic-UI，包括目录结构，HTML 的结构。除了按钮，菜单，Semantic-UI 目前支持 50 多种网站中常见的 UI 组件，详细文档请打开官网查阅：https://semantic-ui.com
录制了一个简单的视频，暂时放在 YouTube 上 (英文)，感兴趣的话请点击：
https://www.youtube.com/watch?v=JyBKcfLUabc 参考技术A 准备工具
你需要使用命令行去安装，Windows 用 Powershell ，Mac 使用终端。然后确定你已经安装好了 npm 与 gulp 。
安装 Semantic UI
先为项目创建一个目录，然后进入到这个目录的下面，比如我在自己的桌面上去为项目创建一个目录：
cd ~/desktop
mkdir ninghao-semantic
cd ninghao-semantic
使用 npm 去安装一下 Semantic UI：
npm install semantic-ui
过一会儿会出现设置 Semantic UI 的提示，按上下箭头可以选择：
❯ Automatic (Use defaults locations and all components)
Express (Set components and output folder)
Custom (Customize all src/dist values)
Automatic：自动配置，一切都用默认的设置。
Express：快速设置，只需要设置组件还有输出的目录。
Custom：自定义，完全自己去定义 src/dist 目录。
选择默认的 Automatic ，回车执行，又会提示：
[?] We detected you are using NPM. Nice!
Is this your project folder?
/Users/xiaoxue/Desktop/ninghao-semantic (Use arrow keys)
❯ Yes
No, let me specify。
以上是关于Semantic Kernel 工具箱： Semantic Kernel Tools的主要内容，如果未能解决你的问题，请参考以下文章
Semantic Kernel 知多少 | 开启面向AI编程新篇章