Category: Programming
programming, coding, Leetcode, HackerRank
網頁圖片輪播
前言 圖片輪播應該是網頁上蠻常見的圖片顯示方式，在面對很多張圖片需要顯示的時候，輪播確實是個很好用的方法。 在實作上有好幾種方法，有些並沒有使用成功，在這邊做一個紀錄。 目錄 1. CSS 動態播放2. 延遲秒數更改圖片3. Slick 圖片輪播4. 點擊按鈕改變圖片 CSS 動態播放 這種播放方式是將圖片設置好，然後持續播放，而且只需更改 CSS ，非常方便使用。但缺點就是它是自動的，沒辦法再用手動去控制它。 以上完成第一種方式 延遲秒數更改圖片 js 寫法 1. 設定圖片內容 不太喜歡，因為更新整個頁面，跳動感覺很不舒服，有點影響觀看。 以上完成第二種方式 Slick 這是一個很好用的輪播方式 Demo 網頁: https://kenwheeler.github.io/slick/ 首先加入CDN CDN:<script type=”text/javascript” src=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js“></script> <link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css“/><link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css“/> 設定輪播圖片的 style CSS JS HTML 以上完成第三種方式 點擊按鈕改變圖片 最後是使用按鈕改變圖片的方式 可以上下調整觀看圖片，這個也很方便兒 HTML 寫法如下: JS 寫法: 以上完成第四種方式 Read more
Semantic Kernel 簡介
最近看了 Semantic Kernel 的應用介紹，整理一些筆記心得。 Introduction Semantic Kernel 是微軟的開源 SDK，是一個簡單好用的工具。當你想在現有的應用程式上開發跟 AI 相關功能的時候，Semantic Kernel 可以用很簡單的方式導入 AI service (也就是 OpenAI、AzureOpenAI、HuggingFace 將 LLM 打包成的 API)。目前支援 C#、Python。 Overview 如上圖，可以分成兩個部分解釋 Semantic Kernel 的架構，Brain (大腦)跟 Body (身體)。大腦包含兩個部分 Models (語言模型)、Memory (長短期記憶)。身體指的就是 Plugins，應用程式裡包含的功能，這裡分為兩種：Semantic Functions (自然語言函式，也就是 Prompts)、Native Functions (程式語言函式 Ex:C#)。 Brain — Models 大語言模型(LLM)，就是經過大量資料訓練出來的模型，類似於人類大腦，它能夠回答問題、寫文章、寫翻譯…。知名的 LLM 有 GPT-3.5、GPT-4、LLaMa…。LLM 非常多種，根據不同資料訓練出來的模型，他們會在某些領域上表現的比較好。像是 GPT-4 – 主要支援聊天功能、Curie – 支援語音文字轉換、Davinci – 支援圖像視覺生成。OpenAI 跟 Azure… Read more
KnightL on a Chessboard(HackerRank) – BFS
Problem Link: KnightL on a Chessboard KnightL is a chess piece that moves in an L shape. We define the possible moves of KnightL(a,b) as any movement from some position (x1,y1) to some (x2,y2) to some satisfying either of the following: Note that (a,b) and (b,a) allow for the same exact set of movements. For… Read more