멀티미디어 프로그램 개발은 텍스트, 이미지, 오디오, 비디오, 애니메이션을 통합하여 프로그래밍 언어를 통해 대화형 기능을 구현하는 기술 분야를 말합니다. 개발은 하드웨어 가속, 코딩 효율성 및 사용자 경험의 부드러움에 중점을 둡니다.
| 개발분야 | 일반적으로 사용되는 언어 | 기술 프레임워크/도구 |
|---|---|---|
| 웹 멀티미디어 | JavaScript / TypeScript | HTML5 Canvas, WebGL, Three.js |
| 모바일 앱/게임 | C++ / C# / Swift | Unity, Unreal Engine, Metal |
| 백엔드 오디오 및 비디오 처리 | Python / Go / C++ | FFmpeg, OpenCV, GStreamer |
참고: 계산량이 많은 멀티미디어 프로그램을 개발하는 경우 CPU 부하를 줄이기 위해 하드웨어 디코딩을 우선적으로 수행해야 합니다.
DirectX는 소프트웨어(특히 게임)가 그래픽 카드 및 사운드 효과 카드와 같은 하드웨어와 직접 통신할 수 있도록 Microsoft에서 개발한 일련의 API(응용 프로그래밍 인터페이스)입니다. 이는 Windows 플랫폼 및 Xbox 콘솔용 멀티미디어 개발의 핵심 기둥입니다.
| 버전 | 중요한 기능 | 적용 가능한 환경 |
|---|---|---|
| DirectX 11 | 높은 안정성을 위한 표면 테셀레이션(테셀레이션) 및 멀티스레드 렌더링을 도입합니다. | 윈도우 7 이상 |
| DirectX 12 | 기본 API(저수준)는 CPU 오버헤드를 크게 줄이고 그래픽 카드의 멀티 코어 스케줄링을 지원합니다. | Windows 10 / 11 |
| DirectX 12 Ultimate | Ray Tracing 및 Mesh Shader와 같은 차세대 기술을 통합합니다. | 고급 GPU 및 Xbox Series X/S |
참고: 최신 게임 개발에서 개발자는 일반적으로 개발 효율성을 높이기 위해 하위 수준 지침을 직접 작성하는 대신 Unity 또는 Unreal Engine과 같은 엔진을 통해 DirectX를 호출합니다.
MF(Media Foundation)는 Windows Vista 이후 Microsoft에서 출시한 멀티미디어 프레임워크로 기존 DirectShow를 대체하도록 설계되었습니다. 새로운 파이프라인 설계를 채택하고 고해상도 비디오, DRM(디지털 권한 관리) 및 보다 효율적인 하드웨어 가속에 최적화되었습니다. 오디오 및 비디오를 처리하는 것은 최신 Windows 응용 프로그램의 핵심 기술입니다.
Media Foundation은 멀티미디어 처리 프로세스를 세 가지 주요 수준으로 분류합니다. 이 설계는 매우 높은 제어 유연성을 제공합니다.
| 특성 | Media Foundation | DirectShow(이전 버전) |
|---|---|---|
| 고해상도 지원 | 4K, 8K 및 HDR 콘텐츠에 기본적으로 최적화되었습니다. | 확장성에 제한이 있고 초고해상도를 처리하기 어렵습니다. |
| 하드웨어 가속 | DXVA 2.0과 긴밀하게 통합되어 매우 효율적입니다. | 특정 필터 구현에 따라 성능이 달라질 수 있습니다. |
| 콘텐츠 보호 | 내장된 PMP(Protected Media Path)는 DRM을 지원합니다. | 통일된 저작권 보호 메커니즘이 부족합니다. |
| 스레드 모델 | 비동기 토폴로지를 사용하여 UI 정지를 줄입니다. | 동기식 실행 모델은 인터페이스 지연을 쉽게 유발할 수 있습니다. |
참고: Media Foundation의 성능은 뛰어나지만 API 디자인은 상대적으로 복잡하고 엄격합니다. 개발자는 디버깅을 위해 Microsoft에서 제공하는 MFTrace 도구를 사용하여 미디어 파이프라인의 이벤트 흐름을 추적하는 것이 좋습니다.
DirectShow는 Windows 플랫폼에서 오디오 및 비디오 캡처 및 재생에 주로 사용되는 COM(구성 요소 개체 모델)을 기반으로 하는 멀티미디어 프레임워크입니다. Microsoft는 나중에 Media Foundation을 후속 제품으로 출시했지만 DirectShow는 강력한 호환성과 유연성으로 인해 산업용 카메라, 의료 영상, 기존 오디오 및 비디오 소프트웨어에서 여전히 널리 사용되고 있습니다.
DirectShow의 핵심 개념은 다양한 필터를 링크에 연결하여 멀티미디어 데이터를 처리하는 필터 그래프입니다.
| 기능적 분류 | 설명하다 |
|---|---|
| 미디어 재생 | 여러 컨테이너 형식(예: AVI, WMV, MP4) 및 코덱의 통합을 지원합니다. |
| 이미지 캡처 | USB 카메라에 적합한 WDM(Windows Driver Model) 장치와 통신하기 위한 표준 인터페이스를 제공합니다. |
| 하드웨어 가속 | 하드웨어 가속 렌더링은 VMR(Video Mixing Renderer) 또는 EVR을 통해 그래픽 카드를 사용하여 수행할 수 있습니다. |
| 형식 변환 | 실시간 비디오 스트림의 리샘플링, 자르기 및 색상 공간 변환(예: YUV에서 RGB로)을 지원합니다. |
참고: 최신 개발을 수행할 때 이전 시스템을 지원할 필요가 없다면 Microsoft에서는 고해상도 콘텐츠 및 DRM(디지털 권한 관리)을 처리하는 데 더 많은 이점이 있는 Media Foundation을 우선적으로 사용할 것을 권장합니다.
Vulkan은 Khronos Group이 개발한 차세대 크로스 플랫폼 그래픽 및 컴퓨팅 API입니다. OpenGL과 달리 Vulkan은 보다 직접적인 하드웨어 제어를 제공하고 드라이버의 오버헤드를 최소화하며 멀티 코어 프로세서의 활용도를 향상시키도록 설계된 하위 수준 API입니다.
Vulkan의 설계 논리에서는 개발자가 최고의 성능을 얻기 위해 더 많은 관리 책임을 맡도록 요구합니다.
| 특성 | Vulkan | OpenGL |
|---|---|---|
| 운전자 부담 | 매우 낮음. 대부분의 논리는 개발자가 구현합니다. | 더 높은 수준에서는 드라이버가 많은 백그라운드 관리를 담당합니다. |
| 멀티스레드 지원 | 병렬 작업 배포에 대한 기본 지원. | 주로 단일 스레드에 의존합니다. |
| 개발 복잡성 | 매우 높으며 코드 양은 일반적으로 OpenGL의 몇 배입니다. | 중간, 초보자에게 더 친숙합니다. |
| 하드웨어 활용도 | 높음, GPU 컴퓨팅 및 메모리를 정확하게 제어할 수 있습니다. | , API의 추상화 수준에 따라 제한됩니다. |
참고: Vulkan의 개발 임계값은 매우 높기 때문에 일반적으로 극단적인 성능(예: id Tech 7)이 필요한 3D 게임 엔진 코어 또는 크로스 플랫폼 고성능 컴퓨팅이 필요한 과학 시뮬레이션 프로그램에 권장됩니다.
OpenCV(오픈 소스 컴퓨터 비전 라이브러리)는 실시간 이미지 처리 및 분석을 위한 오픈 소스 컴퓨터 비전 및 머신 러닝 소프트웨어 라이브러리입니다.
# 이미지를 읽고 표시
이력서2 가져오기
이미지 = cv2.imread("image.jpg")
cv2.imshow("이미지", 이미지)
cv2.waitKey(0)
cv2.destroyAllWindows()
OpenCV에서 이미지를 읽는 핵심 기능은cv::imread. 이미지 파일을 다음과 같이 로드합니다.cv::Mat매트릭스 형식.
#include <opencv2/opencv.hpp>
// 문법 프로토타입
cv::Mat img = cv::imread(const std::string& 파일 이름, int 플래그 = cv::IMREAD_COLOR);
일반적으로 사용되는 태그(플래그):
주요 아이디어:cv::imread실패했고C++ 예외가 발생하지 않습니다., 따라서 전통적인 try-catch는 효과적이지 않습니다. 읽기에 실패하면(예: 경로 오류, 지원되지 않는 형식 또는 권한 부족) 빈 메시지가 반환됩니다.cv::Mat물체.
올바른 처리 흐름을 사용해야 합니다.empty()확인할 멤버 함수:
#include <opencv2/opencv.hpp>
#include <iostream>
정수 메인() {
std::string 경로 = "data/image.jpg";
cv::Mat img = cv::imread(경로);
// 이미지가 성공적으로 로드되었는지 확인해야 합니다.
if (img.empty()) {
표준::cerr << "오류: 이미지 파일을 읽을 수 없습니다!" << 표준::endl;
표준::cerr << "경로가 올바른지 확인하세요:" << 경로 << 표준::endl;
-1을 반환합니다.
}
//성공적으로 읽은 후 작업을 실행합니다.
표준::cout << "이미지 너비: " << img.cols << " 높이: " << img.rows << 표준::endl;
0을 반환합니다.
}
만약에img.empty()일반적으로 다음과 같은 이유로 인해 사실입니다.
| 이유 | 설명 및 대책 |
|---|---|
| 파일 경로 오류 | 가장 일반적인 이유. 상대 경로가 실행 디렉터리에 대한 상대 경로인지 확인하거나 절대 경로를 사용하십시오. |
| 지원되지 않는 파일 확장자 | OpenCV에는 해당 디코더(예: libjpeg, libpng)가 필요합니다. OpenCV를 지원하지 않고 컴파일하면 읽을 수 없습니다. |
| 중국어 경로 문제 | Windows 환경, 이전 버전 또는 특정 컴파일 환경에서cv::imread중국어 경로에 대한 지원이 부족합니다. |
| 권한이 부족합니다. | 프로그램을 실행하는 사용자에게는 파일을 읽을 수 있는 운영 체제 권한이 없습니다. |
Windows 중국어 경로로 인해 읽기에 실패하는 경우 파일을 메모리 버퍼로 먼저 읽은 후 읽는 것이 좋습니다.cv::imdecode디코딩하려면:
#include <fstream>
#include <vector>
cv::Mat imread_unicode(std::string path) {
std::ifstream fs(path, std::ios::binary | std::ios::ate);
if (!fs.is_open()) return cv::Mat();
std::streamsize size = fs.tellg();
fs.seekg(0, std::ios::beg);
std::vector<char> buffer(size);
if (fs.read(buffer.data(), size)) {
return cv::imdecode(cv::Mat(buffer), cv::IMREAD_COLOR);
}
return cv::Mat();
}
점 그룹(예: 나사 모서리 또는 사인파)의 순서가 불규칙한 경우 먼저 맞는 직선 방향으로 투영하고 정렬해야 합니다. 그런 다음 직선(부호 거리)을 기준으로 양수 및 음수 오프셋에 따라 점을 올바르게 그룹화할 수 있습니다. 다음은 OpenCV와 표준 C++를 통합하기 위한 구현 계획이다.
먼저 필요한 특정 지점 거리 정렬 기능을 구현하십시오. 이는 시작점이나 특정 특징점을 찾는 데 사용될 수 있습니다.
#include <벡터>
#include <배열>
#include <알고리즘>
#include <opencv2/opencv.hpp>
Point2D = std::array<float, 2> 사용
Points = std::벡터<Point2D> 사용
네임스페이스 GeometryPointsUtil {
bool FindSortedPointsByDistOfPoint(Points& retPoints, const Points& allPoints, const Point2D& aPoint) {
if(allPoints.empty())는 false를 반환합니다.
retPoints = allPoints;
std::sort(retPoints.begin(), retPoints.end(), [&aPoint](const Point2D& p1, const Point2D& p2) {
float dx1 = p1[0] - aPoint[0];
float dy1 = p1[1] - aPoint[1];
float dx2 = p2[0] - aPoint[0];
float dy2 = p2[1] - aPoint[1];
// sqrt 작업 오버헤드를 피하기 위해 제곱합 비교를 사용합니다.
(dx1 * dx1 + dy1 * dy1) < (dx2 * dx2 + dy2 * dy2);
});
사실을 반환;
}
}
진동하는 선의 경우 이 기능은 자동으로 직선을 맞추고, 투영을 정렬하고, 직선의 양쪽에 따라 분할합니다.
std::벡터<포인트> SplitOscillatingPoints(const Points& allPoints) {
if (allPoints.size() < 2) return {allPoints};
// 1. 직선 피팅
표준::벡터<cv::Point2f> cvPts;
for (const auto& p : allPoints) cvPts.push_back({p[0], p[1]});
cv::Vec4f 라인; // (vx, vy, x0, y0)
cv::fitLine(cvPts, 라인, cv::DIST_L2, 0, 0.01, 0.01);
float vx = 라인[0], vy = 라인[1], x0 = 라인[2], y0 = 라인[3];
// 2. 투영 정렬: 점이 직선을 따라 배열되었는지 확인합니다.
구조체 투영점 {
Point2D 원본;
플로트 t; // 투영 길이
플로트 사이드; // 직선까지의 대수적 거리
};
std::벡터<ProjectedPoint> 예상;
float nx = -vy; // 법선 벡터 x
플로트 ny = vx; // 법선 벡터 y
for (const auto& p : allPoints) {
float dx = p[0] - x0;
플로트 dy = p[1] - y0;
float t = dx * vx + dy * vy; // 직선에 투영된 변위
float s = dx * nx + dy * ny; // 직선에 수직인 거리(더하기 및 빼기 기호 포함)
projected.push_back({p, t, s});
}
std::sort(projected.begin(), projected.end(), [](const ProjectedPoint& a, const ProjectedPoint& b) {
a.t <를 반환합니다. b.t;
});
// 3. 양수 및 음수 부호 전환을 기반으로 그룹화
std::벡터<포인트> 세그먼트;
if (projected.empty()) 세그먼트를 반환합니다.
포인트 currentGroup;
bool lastSide = (투영[0].side >= 0);
for (const auto& item : 예상됨) {
bool currentSide = (item.side >= 0);
if (currentSide != lastSide && !currentGroup.empty()) {
세그먼트.push_back(현재그룹);
currentGroup.clear();
}
currentGroup.push_back(item.original);
lastSide = 현재측;
}
if (!currentGroup.empty()) 세그먼트.push_back(currentGroup);
세그먼트를 반환합니다.
}
Halcon은 MVTec에서 개발한 강력한 산업용 비전 소프트웨어로, 이미지 처리 및 머신 비전 애플리케이션용으로 특별히 설계되었습니다.
Shotcut은 다양한 형식을 지원하고 강력한 편집 도구를 많이 갖춘 무료 오픈 소스 비디오 편집 소프트웨어입니다. 기능은 다음과 같습니다:
적용 가능한 플랫폼: Windows, Mac, Linux
OpenShot은 다음과 같은 주요 기능을 포함합니다:
적용 가능한 플랫폼: Windows, Mac, Linux
Blender는 비디오 편집 및 특수 효과 제작에 적합한 강력한 비디오 편집기가 내장된 잘 알려진 오픈 소스 3D 모델링 및 애니메이션 소프트웨어입니다. 그 기능은 다음과 같습니다:
적용 가능한 플랫폼: Windows, Mac, Linux
Kdenlive는 Linux에서 널리 사용되는 오픈 소스 비디오 편집 소프트웨어이며 Windows도 지원합니다. 주요 기능은 다음과 같습니다:
적용 가능한 플랫폼: Windows, Mac, Linux
Lightworks는 무료 버전과 유료 버전을 제공하며 무료 버전은 기본 편집 기능을 제공합니다. 기능은 다음과 같습니다:
적용 가능한 플랫폼: Windows, Mac, Linux
위의 오픈 소스 비디오 편집 소프트웨어는 간단한 홈 비디오 편집부터 전문 비디오 제작에 이르기까지 다양한 수준의 비디오 편집 요구 사항에 적합한 강력한 기능을 제공합니다.
| 소프트웨어 이름 | 대략적인 검색량 |
|---|---|
| OpenShot | 110,000 |
| Kdenlive | 90,500 |
| Shotcut | 49,500 |
| Avidemux | 18,100 |
| Losslesscut | 14,800 |
| Blender VSE | 10,000 |
| Natron | 6,600 |
| Cinelerra | 5,400 |
| Pitivi | 3,600 |
| LiVES | 1,600 |
OpenShot은 무료 오픈 소스 비디오 편집기이며 프로젝트 이름은OpenShot/openshot-qt, 주로 기반으로Python그리고Qt개발. 이 프로젝트는 모든 수준의 사용자에게 적합한 사용하기 쉽고 기능이 풍부한 비디오 편집 도구를 제공하는 것을 목표로 합니다.
오픈샷은PyQt그래픽 사용자 인터페이스로 사용되며 다음과 결합됩니다.libopenshot(C++ 구현) 비디오 편집의 핵심 로직을 처리합니다. 또한 OpenShot은 다음을 활용합니다.FFmpeg여러 형식의 디코딩 및 인코딩을 지원합니다.
OpenShot은 간단하면서도 강력한 비디오 편집이 필요한 사용자에게 적합합니다. 아마추어 비디오 제작자이든 교육 목적이든 OpenShot은 편집과 제작을 쉽게 할 수 있는 유연한 도구와 플러그인을 제공합니다.
OpenShot 프로젝트에는 활발한 오픈 소스 커뮤니티가 있으며, 사용자와 개발자는 GitHub를 통해 코드를 제공하고, 문제를 보고하고, 새로운 기능 제안을 제출할 수 있습니다. 누구나 참여하여 OpenShot의 기능과 안정성을 개선하는 데 도움을 줄 수 있습니다.
사용자는 GitHub 페이지를 통해 소스 코드를 다운로드하거나 OpenShot 공식 웹사이트에서 실행 파일을 다운로드할 수 있습니다. 자세한 설치 지침과 문서는 GitHub에서도 확인할 수 있습니다.
수입 OS
하위 프로세스 가져오기
def create_kdenlive_project(project_path, video_path, audio_path, srt_path):
"""
기본 Kdenlive XML 프로젝트 파일 생성 및 자산 가져오기
"""
# Kdenlive가 파일을 올바르게 읽을 수 있도록 파일의 절대 경로를 가져옵니다.
video_abs = os.path.abspath(video_path)
audio_abs = os.path.abspath(audio_path)
srt_abs = os.path.abspath(srt_path)
# 기본 Kdenlive MLT 구조(간단한 버전)
kdenlive_xml = f"""<?xml version="1.0" 인코딩="UTF-8"?>
<mlt version="7.24.0" title="자동 생성 프로젝트">
<Producer id="video_main" Resource="{video_abs}"/>
<Producer id="audio_main" Resource="{audio_abs}"/>
<Producer id="subtitle_main" Resource="{srt_abs}"/>
<재생목록 id="main_bin">
<항목 프로듀서="video_main"/>
<entry producer="audio_main"/>
<entry producer="subtitle_main"/>
</재생목록>
<트랙터 id="main_timeline">
<멀티트랙>
<트랙 이름="동영상 트랙">
<entry producer="video_main" in="0" out="1000"/>
</트랙>
<트랙 이름="오디오 트랙">
<entry producer="audio_main" in="0" out="1000"/>
</트랙>
</멀티트랙>
</트랙터>
</mlt>
"""
open(project_path, "w", 인코딩="utf-8")을 f로 사용:
f.write(kdenlive_xml)
print(f"프로젝트 파일이 생성되었습니다: {project_path}")
def open_with_kdenlive(project_path, kdenlive_exe_path):
"""
Kdenlive를 시작하고 생성된 프로젝트를 로드합니다.
"""
시도해 보세요:
# 하위 프로세스를 사용하여 프로그램을 열고 파일 매개변수를 가져옵니다.
하위 프로세스.Popen([kdenlive_exe_path, project_path])
print("Kdenlive를 시작하는 중...")
e와 같은 예외를 제외하고:
print(f"시작 실패: {e}")
__name__ == "__main__"인 경우:
# 파일 경로 설정
MY_VIDEO = "input_video.mp4"
MY_AUDIO = "output_voice.wav"
MY_SRT = "output_subtitle.srt"
SAVE_PROJECT = "auto_project.kdenlive"
# Kdenlive 실행 파일 경로(Windows의 예, Linux는 일반적으로 'kdenlive'를 직접 사용함)
KDENLIVE_PATH = r"C:\Program Files\kdenlive\bin\kdenlive.exe"
# 1. 프로젝트 파일 생성
create_kdenlive_project(SAVE_PROJECT, MY_VIDEO, MY_AUDIO, MY_SRT)
# 2. Kdenlive 시작
open_with_kdenlive(SAVE_PROJECT, KDENLIVE_PATH)
하위 프로세스 가져오기
# 간단한 MLT XML 구조를 정의합니다.
# 이 XML은 두 가지 자료의 재생 순서를 정의합니다.
mlt_xml_content = """<mlt>
<Producer id="clip1" Resource="video_part1.mp4" />
<Producer id="clip2" Resource="video_part2.mp4" />
<playlist id="main_track">
<entry producer="clip1" in="0" out="150" />
<entry producer="clip2" in="0" out="300" />
</재생목록>
</mlt>
"""
#파일에 콘텐츠 쓰기
open("auto_edit.mlt", "w", 인코딩="utf-8")을 f로 사용:
f.write(mlt_xml_content)
def render_video(mlt_file, 출력_파일):
"""
Melt 명령줄 도구를 사용하여 GUI를 열지 않고 직접 비디오 렌더링
"""
# Melt는 MLT용 명령줄 인터페이스 도구입니다.
명령 = [
"녹다",
mlt_파일,
"-소비자", f"avformat:{output_file}",
"acodec=aac", "vcodec=libx264", "preset=fast"
]
시도해 보세요:
print(f"백그라운드 렌더링 시작: {output_file}...")
subprocess.run(명령어, check=True)
print("렌더링이 완료되었습니다!")
FileNotFoundError 제외:
print("오류: Melt 실행 파일을 찾을 수 없습니다. MLT 프레임워크가 설치되어 있는지 확인하세요.")
__name__ == "__main__"인 경우:
#렌더링 수행
render_video("auto_edit.mlt", "final_result.mp4")
이 스크립트는 이미지 인식을 사용하여 UI 요소를 배치합니다. 실행하기 전에 편집 인터페이스에서 "이미지 및 텍스트를 영화로" 및 "비디오 생성" 버튼의 작은 아이콘을 캡처하여 다음과 같이 저장하십시오.btn_start.png그리고btn_generate.png프로그램 코드와 동일한 디렉토리에 저장하십시오.
먼저 필요한 Python 라이브러리를 설치하십시오.
pip install pyautogui pyperclip opencv-python
수입 OS
수입 시간
importpyautogui
파이퍼클립 가져오기
# 매개변수 설정
JIANYING_PATH = r"C:\Users\YourName\AppData\Local\JianyingPro\Apps\JianyingPro.exe" # 실제 경로로 바꾸세요.
SCRIPT_FILE = "my_script.txt" # 미리 준비된 스크립트 파일
CONFIDENCE_LEVEL = 0.8 # 이미지 인식 정확도(0-1)
def run_automation():
# 1. 문서의 내용을 읽어보세요
그렇지 않은 경우 os.path.exists(SCRIPT_FILE):
print("오류: 문서 파일을 찾을 수 없습니다.")
반환
open(SCRIPT_FILE, "r", 인코딩="utf-8")을 f로 사용:
내용 = f.read()
# 2. 클리핑 켜기
print("클리핑 시작 중...")
os.startfile(JIANYING_PATH)
time.sleep(8) # 소프트웨어가 완전히 로드될 때까지 기다립니다.
시도해 보세요:
# 3. "그림 및 텍스트를 영화로" 버튼을 찾아 클릭합니다.
start_btn = pyautogui.locateCenterOnScreen('btn_start.png', Confidence=CONFIDENCE_LEVEL)
start_btn인 경우:
pyautogui.click(start_btn)
print("그림과 텍스트 인터페이스에 들어왔습니다.")
시간.수면(2)
그 외:
print(""영화에 그림과 텍스트 삽입" 버튼을 찾을 수 없습니다")
반환
# 4. 문서 입력 처리
pyperclip.copy(content) # 문서를 클립보드에 복사합니다.
pyautogui.click(x=pyautogui.size().width//2, y=pyautogui.size().height//2) # 초점을 맞추려면 창 중앙을 클릭하세요.
pyautogui.hotkey('ctrl', 'v')
print("원고가 붙여졌습니다.")
시간.수면(1)
# 5. "비디오 생성"을 찾아서 클릭하세요.
gen_btn = pyautogui.locateCenterOnScreen('btn_generate.png', Confidence=CONFIDENCE_LEVEL)
gen_btn인 경우:
pyautogui.click(gen_btn)
print("프로젝트 생성 중...")
그 외:
print(""동영상 생성" 버튼을 찾을 수 없습니다")
e와 같은 예외를 제외하고:
print(f"오류가 발생했습니다: {e}")
__name__ == "__main__"인 경우:
run_automation()
| 단계 | 설명하다 |
|---|---|
| 이미지 캡처 | 이미지 캡처 시 버튼 중앙에 있는 텍스트나 아이콘만 캡처하도록 하고, 다양한 배경 테마와의 호환성을 높이기 위해 배경색을 너무 많이 포함하지 않도록 하세요. |
| Time Sleep | 자동화 실패의 가장 일반적인 이유는 "소프트웨어가 응답하기 전에 프로그램이 클릭되었기 때문"입니다. 컴퓨터 성능에 따라 조정해주세요time.sleep값. |
| Fail-Safe | PyAutoGUI에는 보호 메커니즘이 내장되어 있습니다. 마우스를 화면의 "왼쪽 상단 모서리"로 빠르게 이동하면 프로그램이 즉시 종료될 수 있습니다. |
.png그림과 같이 화면 해상도나 줌 비율(DPI)의 변화로 인해 인식이 실패할 수 있습니다.pygetwindow라이브러리는 클리핑 창을 활성 전경 창으로 강제합니다.참고: 빈번한 UI 자동화는 소프트웨어 업데이트(인터페이스 위치 변경)로 인해 무효화될 수 있습니다. 장기적으로 안정적인 운영이 필요한 경우 "경로 2: JSON Draft 수정"을 연구하는 것이 더 강력한 솔루션이 될 것입니다.
ffmpeg、ffprobe、ffplayffmpeg -i input.avi output.mp4ffmpeg -ss 00:00:10 -i input.mp4 -t 5 output.mp4ffmpeg -i input.mp4 -q:a 0 -map a output.mp3ffmpeg -i input.mp4 -vf subtitles=sub.srt output.mp4멀티미디어 개발에서는 실행 환경에 FFmpeg가 있는지 확인하는 것이 기본 요구 사항입니다. 파이썬을 통해subprocess모듈 및urllib, 자동화된 환경 구성 프로세스를 구현할 수 있습니다.
프로그램 코드는 주로 시스템 경로 감지와 원격 다운로드 및 압축 해제의 두 단계로 나뉩니다.
shutil.which()실행 파일을 찾아보세요. 이는 플랫폼 전반에서 PATH를 감지하는 가장 안정적인 방법입니다.sys.platform다운로드 링크를 결정합니다(일반적으로 Windows의 경우 .zip, Linux의 경우 .tar.xz).os.environ["PATH"]。수입 OS
수입 차단
수입 플랫폼
urllib.request 가져오기
zip 파일 가져오기
def verify_ffmpeg():
# 1. 시스템 PATH에 이미 ffmpeg가 있는지 확인하세요.
만약 Shutil.which("ffmpeg"):
print("FFmpeg가 이미 시스템 경로에 존재합니다.")
True를 반환
print("FFmpeg가 감지되지 않았습니다. 다운로드를 시작할 준비가 되었습니다...")
# 2. 운영 체제 설정에 따라 정보 다운로드(Windows를 예로 들어)
platform.system() == "Windows"인 경우:
URL = "https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.zip"
target_zip = "ffmpeg.zip"
extract_dir = "ffmpeg_bin"
# 파일 다운로드
urllib.request.urlretrieve(url, target_zip)
# 압축을 푼다
zipfile.ZipFile(target_zip, 'r')을 zip_ref로 사용:
zip_ref.extractall(extract_dir)
# 압축이 풀린 bin 디렉터리를 찾아 환경 변수를 추가합니다.
# 실제 경로는 압축된 패키지 구조에 따라 다릅니다.
ffmpeg_path = os.path.abspath(os.path.join(extract_dir, "ffmpeg-release-essentials", "bin"))
os.environ["PATH"] += os.pathsep + ffmpeg_path
print(f"FFmpeg가 {ffmpeg_path}에 배포되었습니다.")
True를 반환
그 외:
print("현재 예제는 Windows의 자동 다운로드만 지원합니다. 다른 시스템의 경우 수동으로 설치하십시오.")
거짓을 반환
# 검사 수행
verify_ffmpeg()
| 프로젝트 | 설명하다 |
|---|---|
| 권한 문제 | Linux 또는 macOS에서는 다운로드한 바이너리 파일을os.chmod(path, 0o755)실행 권한을 부여합니다. |
| 버전이 잠겼습니다 | 신뢰할 수 있는 소스(예: Gyan.dev 또는 BtbN)에서 다운로드하고 버전이 코드와 호환되는지 확인하는 것이 좋습니다. |
| 네트워크 시간 초과 | FFmpeg는 크기가 더 크므로 다운로드 시 추가하는 것이 좋습니다.try-except네트워크 중단을 처리하거나requests라이브러리에 진행률 표시줄이 표시됩니다. |
AppData또는 반복적인 다운로드를 피하기 위한 프로젝트 루트 디렉터리입니다.참고: 프로덕션 환경에서 대규모 바이너리를 자주 다운로드하면 사용자 경험에 영향을 미칠 수 있습니다. 처음 시작할 때 사용자에게 메시지를 표시하거나 설치 패키지에 미리 로드하는 것이 좋습니다.
Python에서 화면을 녹화하는 가장 일반적이고 안정적인 방법은 다음을 결합하는 것입니다.PyAutoGUI(이미지 캡처용)OpenCV(비디오 인코딩 및 저장용) 및NumPy(이미지 데이터 처리용)
먼저 필요한 패키지를 설치해야 합니다. 터미널을 열고 다음 명령을 실행합니다.
pip install opencv-python pyautogui numpy
다음 코드는 전체 화면 이미지를 캡처하여 output.mp4 파일로 저장합니다. 녹음을 중지하려면 키보드의 q 키를 누르세요.
이력서2 가져오기
importpyautogui
numpy를 np로 가져오기
# 화면 해상도를 얻습니다
SCREEN_SIZE = 튜플(pyautogui.size())
# 비디오 인코딩 형식 정의(FourCC)
fourcc = cv2.VideoWriter_fourcc(*"mp4v")
# VideoWriter 객체 생성(파일 이름, 인코딩, 프레임 속도, 해상도)
출력 = cv2.VideoWriter("output.mp4", fourcc, 20.0, SCREEN_SIZE)
print("녹음 중... 중지하려면 'q' 키를 누르세요.")
시도해 보세요:
True인 동안:
# 캡쳐 화면
img = pyautogui.screenshot()
# NumPy 배열로 변환
프레임 = np.array(img)
# 색상을 RGB에서 BGR(OpenCV 표준 형식)로 변환합니다.
프레임 = cv2.cvtColor(프레임, cv2.COLOR_RGB2BGR)
# 비디오 파일에 프레임 쓰기
out.write(프레임)
# 비디오 미리보기 표시(선택사항)
# cv2.imshow("미리보기", 프레임)
# 키보드 입력 감지
cv2.waitKey(1) == ord("q")인 경우:
휴식
마지막으로:
# 리소스를 해제하고 창을 닫습니다.
아웃.릴리스()
cv2.destroyAllWindows()
print("录影结束,档案已储存。")
| 문제 현상 | 이유 및 제안 |
|---|---|
| 동영상이 너무 빨리 재생됩니다. | 실제 기록되는 FPS는 설정값보다 낮습니다. 쓰기 FPS를 낮추거나 mss와 같은 보다 효율적인 검색 라이브러리를 대신 사용해야 합니다. |
| 색상이 비정상적입니다 | COLOR_RGB2BGR 변환을 수행하는 것을 잊었습니다. |
| 코드 실행 시 버벅거림 | 고해상도 화면을 캡처하는 것은 CPU를 많이 사용합니다. 화면 해상도를 낮추거나 특정 영역만 녹화하는 것을 권장합니다. |
Manim(수학 애니메이션 엔진)은 Python으로 작성된 애니메이션 라이브러리로, 특히 수학적 이미지와 애니메이션을 만드는 데 사용됩니다. 마님 수학적 개념, 코드 실행 프로세스 또는 이미지와 애니메이션으로 표현되는 모든 것을 설명하는 고품질 애니메이션을 생성하는 데 사용할 수 있습니다.
마님 애니메이션은 일반적으로 Python 스크립트를 작성한 후 동영상 파일을 생성하여 완성됩니다. 각 애니메이션은 일반적으로 하나 이상의 장면(Scene)을 포함하며 각 장면은 서로 다른 개체(Mobject)로 구성됩니다.
manim import에서 *
클래스 MyFirstScene(장면):
def 구성(자기):
text = Text("Hello, Manim!") # 텍스트 개체를 만듭니다.
self.play(Write(text)) # 애니메이션 생성
Manim은 pip를 통해 설치할 수 있습니다.
pip install manim
OpenGL(Open Graphics Library)은 2D 및 3D 벡터 그래픽을 렌더링하기 위한 다중 언어, 다중 플랫폼 API(응용 프로그래밍 인터페이스)입니다. Khronos Group에서 관리하며 CAD(컴퓨터 지원 설계), 가상 현실, 과학적 시각화 및 비디오 게임 개발에 널리 사용됩니다.
OpenGL은 파이프라인 아키텍처를 사용하여 3D 데이터를 화면의 픽셀로 변환합니다. 최신 OpenGL 코어 모드는 셰이더에 크게 의존합니다.
| 특성 | 설명하다 |
|---|---|
| 플랫폼 간 호환성 | Windows, Linux, macOS(번역 레이어를 통해) 및 모바일 장치(OpenGL ES)에서 실행됩니다. |
| 상태 머신 모델 | OpenGL은 거대한 상태 머신처럼 작동합니다. 개발자는 상태(예: 현재 색상, 바인딩된 텍스처)를 설정한 다음 그리기 지침을 실행합니다. |
| GLSL 언어 | C와 유사한 OpenGL Shading Language를 사용하여 강력한 컴퓨팅 기능을 갖춘 GPU 프로그램을 작성하세요. |
| 확장 메커니즘 | 하드웨어 제조업체가 API 표준을 업데이트하지 않고도 Extension을 통해 새로운 그래픽 카드 기능을 도입할 수 있습니다. |
참고: Vulkan은 낮은 수준의 하드웨어 제어를 제공하는 OpenGL의 후속 제품으로 간주되어 왔지만 상대적으로 간단한 진입 장벽과 풍부한 문서로 인해 OpenGL은 여전히 그래픽 프로그램 개발 학습을 위한 첫 번째 선택입니다.
ManimGL은 렌더링 속도를 향상시키기 위해 OpenGL 가속에 초점을 맞춘 수학적 애니메이션 제작을 위한 Manim의 효율적인 변형입니다.
pip를 사용하여 설치:
pip install manimgl
또는 GitHub에서 최신 버전을 다운로드하세요.
git clone https://github.com/ManimCommunity/ManimGL.git
cd ManimGL
pip install -e .
ManimGL을 사용하여 간단한 장면을 렌더링합니다.
from manimlib import *
class HelloManim(Scene):
def construct(self):
text = Text("Hello, ManimGL!")
self.play(Write(text))
self.wait(2)
실행 명령:
manimgl script.py HelloManim
설치 또는 운영 문제가 발생하면 다음을 시도해 보십시오.
pip install --upgrade pipBlender는 모델링, 애니메이션, 렌더링부터 합성, 비디오 편집까지 전체 파이프라인을 포괄하는 오픈 소스 올인원 3D 제작 소프트웨어입니다. 강력한 Cycles 렌더링 엔진과 유연한 Python API로 잘 알려진 이 도구는 독립 개발자와 중소 규모 스튜디오를 위한 핵심 도구입니다.
Blender의 아키텍처는 매우 컴팩트하며 여러 전용 엔진을 사용하여 함께 작동합니다.
| 특성 | 설명하다 | |
|---|---|---|
| Python API | 거의 모든 UI와 기능을 Python 스크립트를 통해 제어할 수 있어 애드온 개발이 용이합니다. | 기본적으로 Windows, macOS(Apple Silicon) 및 Linux를 지원하며 파일 형식(.blend)은 모든 플랫폼에서 보편적입니다. |
| 통합 파이프라인 | 내장된 비디오 편집기(VSE) 및 컴포지터(Compositor)로 후반 작업을 완료하기 위해 소프트웨어를 전환할 필요가 없습니다. |
3D 자료를 일괄 처리하거나 모델링을 자동화해야 하는 개발자를 위해 Blender는 강력한 배경 모드를 제공합니다.
blender -b -P script.py을 사용하면 그래픽 인터페이스를 열지 않고도 자동화된 작업을 수행할 수 있습니다.참고: Blender는 매우 빠르게 업데이트됩니다(대략 3개월마다 한 버전씩). 스크립트를 개발할 때 버전 간 API 호환성 변경에 주의해야 합니다.
bpy이 모듈은 사용자가 Blender 내의 코드를 통해 3D 이미지와 애니메이션을 생성, 수정 및 관리할 수 있도록 Blender용으로 특별히 설계된 Python API입니다.
bpy?bpyBlender Python의 약어로, Python 스크립트를 사용하여 Blender의 핵심 기능을 작동할 수 있는 함수 라이브러리 집합입니다. ~을 통해bpy, 사용자는 다음을 수행할 수 있습니다.
bpy주요 모듈 및 기능bpy각각 특정 목적을 가진 여러 하위 모듈이 포함되어 있습니다.
bpy.data: Blender의 모든 데이터(객체, 재질, 장면 등)에 액세스합니다.bpy.ops: 작업 클래스, 작업(객체 이동, 회전, 크기 조정 등)을 수행합니다.bpy.context: 현재 블렌더 상태(예: 선택한 개체 또는 활성화된 도구)에 액세스합니다.bpy.types: Blender의 모든 데이터 구조(예: Mesh, Camera, Material)를 정의합니다.bpy.utils: 몇 가지 보조 기능(예: 스크립트 로드 및 언로드)을 제공합니다.다음이 사용됩니다bpy큐브 생성의 간단한 예:
수입 bpy
# 删除现유물
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete(use_global=False)
#添加立방체
bpy.ops.mesh.primitive_cube_add(size=2, enter_editmode=False, align='WORLD', location=(0, 0, 0))
bpy?사용bpy반복적인 작업을 자동화하고 복잡한 모델, 애니메이션 및 렌더링을 생성할 수 있습니다. 게임 디자이너, 건축가, 애니메이터 등 전문가를 위한bpy작업 흐름을 최적화하기 위한 강력한 도구가 제공됩니다.
자세히 알아보려면bpy모듈에 대한 자세한 내용은 공식 문서를 참조하세요.Blender Python API Documentation
Unity는 2D 및 3D 게임, 대화형 애플리케이션, 가상 현실(VR) 및 증강 현실(AR) 경험을 제작하기 위해 설계된 강력한 게임 개발 엔진이자 플랫폼입니다. 초보자와 전문 개발자 모두에게 적합한 사용하기 쉬운 인터페이스와 풍부한 도구를 제공합니다.
Unity는 개발자에게 광범위한 애플리케이션 시나리오와 도구 지원을 제공하는 강력하고 유연한 개발 엔진입니다. 초보자든 전문 개발자든 Unity를 사용하여 고품질 2D 및 3D 게임과 대화형 애플리케이션을 빠르게 만들 수 있습니다.
Cocos는 초기의 순수 코드 기반 Cocos2d-x와 모든 기능을 갖춘 최신 편집기인 Cocos Creator를 포함하는 세계 최고의 오픈 소스 모바일 게임 개발 프레임워크입니다. 가볍고 효율적인 크로스 플랫폼 지원으로 잘 알려져 있으며 2D 및 3D 모바일 게임과 미니 게임(예: WeChat 미니 게임 및 TikTok 미니 게임) 개발에 선호되는 도구입니다.
Cocos 제품군은 다양한 개발 습관의 요구 사항을 충족하기 위해 주로 두 가지 중요한 개발 단계로 나뉩니다.
| 특성 | 설명하다 |
|---|---|
| 극도로 크로스 플랫폼 | iOS, Android, Windows, Mac 및 다양한 웹 브라우저와 인스턴트 게임 플랫폼을 지원합니다. |
| 고성능 렌더러 | 하단 레이어는 Vulkan, Metal, DirectX 및 WebGL과 같은 여러 그래픽 백엔드를 지원하는 자체 개발된 GFX 추상화 레이어를 사용합니다. |
| 가볍고 부피가 크다 | 엔진 코어가 작고 패키지된 게임이 빠르게 시작되므로 네트워크 환경이 제한적이거나 읽기 속도 요구 사항이 높은 플랫폼에 적합합니다. |
| 타입스크립트 지원 | Cocos Creator는 TypeScript를 긴밀하게 통합하고 완전한 유형 검사 및 구문 프롬프트를 제공하며 대규모 프로젝트 유지 관리의 어려움을 줄여줍니다. |
참고: Cocos Creator는 이제 2D와 3D의 핵심 기술을 완전히 통합한 버전 3.x로 발전했습니다. 개발자는 동일한 프로젝트에서 2D UI와 3D 장면을 혼합하고 제작할 수 있습니다.
음성 합성 시스템 개발은 일반적으로 세 단계로 나누어집니다. 첫 번째는프런트 엔드 처리, 원본 텍스트를 언어적 특징(예: 단어 분할, 음성 기호 변환, 운율 예측)으로 변환합니다. 이어서음향 모델, 이러한 특징을 음향 표현(예: 멜 스펙트럼)으로 매핑합니다. 마지막으로보코더, 음향 표현을 사람이 들을 수 있는 파형 오디오로 줄이는 역할을 담당합니다.
| 범주 | 도구/모델 | 개발 기능 |
|---|---|---|
| 오픈 소스 프레임워크 | Coqui TTS / ESPnet | 모듈식 설계는 사전 훈련된 다수의 모델과 미세 조정을 지원합니다. |
| 경량 엔진 | MeloTTS / Kokoro | CPU 친화적이며 엣지 컴퓨팅이나 임베디드 장치에 적합 |
| 대화 최적화 | ChatTTS | 웃음, 캐치프레이즈 및 기타 세부 사항 삽입을 지원하는 음성 대화용으로 특별히 설계되었습니다. |
| 연구 등급 모델 | StyleTTS 2 / VITS | GAN(Generative Adversarial Network)을 기반으로 실제 사람과 매우 가까운 음질을 제공합니다. |
특정 음색의 TTS를 개발하려면 고품질 데이터 세트(보통 1~10시간 분량의 녹음 및 해당 텍스트)를 준비해야 합니다. 개발자가 일반적으로 사용하는전이 학습기술, 대형 기본 모델의 미세 조정을 통해 데이터 볼륨 요구 사항을 크게 줄이고 사운드 유사성과 자연성을 향상시킵니다.
대부분의 애플리케이션 개발자에게는 성숙한 클라우드 API를 직접 호출하는 것이 가장 효율적인 솔루션입니다. 예를 들어ElevenLabs API강렬한 감정 표현을 제공하고,Microsoft Azure Speech SDK가장 완벽한 SSML(음성 합성 마크업 언어) 지원을 제공하여 개발자가 태그를 통해 일시 중지, 스트레스 및 톤을 정밀하게 제어할 수 있습니다. 또한,OpenAI TTS API간단한 인터페이스와 극히 낮은 추론 지연으로 인해 실시간 대화형 애플리케이션에서 매우 인기가 높습니다.
개발 초기에는 '레이턴시(RTF)'와 '음질'의 밸런스를 우선시하는 것이 좋습니다. 실시간 고객 서비스에 적용한다면 저지연 스트리밍(Streaming)이 핵심이다. 오디오북에 적용한다면 긴 텍스트 처리 능력과 풍부한 리듬감을 갖춘 모델을 추구하는 것이 우선이다. 또한, 정확한 발음 이해를 직접적으로 결정짓는 각 언어의 G2P(음소간 문자) 지원 여부에 주목할 필요가 있다.
CosyVoice 2는 Alibaba의 오픈 소스 음성 합성(TTS) 모델의 고급 버전입니다. 1세대에 비해 발음 정확도, 세밀한 감정 제어, 스트리밍 추론 대기 시간 등에서 획기적인 발전을 이루었습니다. 고품질 톤 복제를 지원할 뿐만 아니라 명령 제어 기술을 도입하여 AI 음성을 더욱 "인간적"으로 만듭니다.
CosyVoice 2는 "텍스트 음성 언어 모델" 및 "Flow Matching" 기술을 사용하여 엔드투엔드 음성 생성을 달성합니다.
| 기능 | 코지보이스 2 설명 |
|---|---|
| 다국어 지원 | 중국어, 영어, 일본어, 한국어 및 다양한 방언(광둥어, 사천어, 상하이어, 천진어 등)을 지원합니다. |
| 감정/명령 제어 | 음성 감정과 말하는 속도는 명령(예: "행복하게 말하세요", "화나게 말하세요")을 통해 제어할 수 있습니다. |
| 3초 초고속 복제 | 제로샷 고음질 사운드 재현은 단 3~10초의 샘플 오디오로 달성할 수 있습니다. |
| 혼합 언어 합성 | 동일한 텍스트에 중국어와 영어 여러 언어를 혼합하는 것을 지원하며 음색의 일관성이 유지됩니다. |
참고: CosyVoice 2를 로컬로 배포하는 경우 NVIDIA 그래픽 카드에 최소 8GB의 비디오 메모리를 장착하고 공식 권장 메모리를 사용하는 것이 좋습니다.vLLM최적의 RTF(실시간 속도) 성능을 위해 프레임워크를 가속화합니다.
CosyVoice 2는 Python을 기반으로 개발되었습니다. 복잡한 오디오 처리 및 딥러닝 환경이 포함되므로 사용을 적극 권장합니다.Conda격리된 설치를 위한 가상 환경입니다. 현재 Linux는 가장 높은 공식 지원을 제공하는 반면 Windows 사용자는 WSL2 또는 특정 커뮤니티 개정판을 통해 배포하는 것이 좋습니다.
시작하기 전에 시스템에 NVIDIA 드라이버(8GB 이상의 비디오 메모리 권장)와 Conda가 설치되어 있는지 확인하십시오.
conda create -n cosyvoice2 python=3.10
conda activate cosyvoice2
Pynini는 텍스트 정규화를 처리하는 핵심 구성 요소이며 conda를 통해 설치해야 합니다.
conda install -y -c conda-forge pynini==2.1.5
git clone --recursive https://github.com/FunAudioLLM/CosyVoice.git
cd CosyVoice
pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/
CosyVoice 2를 사용하려면 사전 훈련된 모델 가중치를 다운로드해야 합니다. Python 스크립트를 통해 다운로드를 자동화할 수 있습니다.
modelscope import snapshot_download에서
# 0.5B 메인모델 다운로드
snapshot_download('iic/CosyVoice2-0.5B', local_dir='pretrained_models/CosyVoice2-0.5B')
# 텍스트 정규화 리소스 다운로드
snapshot_download('iic/CosyVoice-ttsfrd', local_dir='pretrained_models/CosyVoice-ttsfrd')
CozyVoice 2는 빠른 더빙부터 전문적인 복제까지 사용자의 필요에 맞는 다양한 모드를 제공합니다.
| 사용 패턴 | 작동 지침 | 적용 가능한 시나리오 |
|---|---|---|
| WebUI 시작 | 구현하다python webui.py, 브라우저에서 시각적 인터페이스를 엽니다. |
수동 더빙 및 빠른 테스트 효과. |
| 3초의 매우 빠른 재생 | 사운드 복제를 달성하려면 3~10초 분량의 참조 오디오와 해당 텍스트를 업로드하세요. | 맞춤형 음성 패키지, 셀프 미디어 더빙. |
| 교차 언어/방언 | 중국어 텍스트를 입력하고 광동어 또는 사천 사투리 성조 출력을 선택합니다. | 현지화된 콘텐츠 제작. |
| 명령 제어 | 텍스트 앞에 명령을 추가합니다(예: [웃음], [화남]). | 오디오북, 각색된 음성 해설. |
CosyVoice 2를 자신의 Python 프로젝트(예: Kdenlive의 자동화 스크립트)에 통합하려는 경우:
cosyvoice.cli.cosyvoice에서 CosyVoice2 가져오기
토치오디오 가져오기
#모델 초기화
cosyvoice = CosyVoice2('pretrained_models/CosyVoice2-0.5B')
# 추론 실행(사전 훈련된 음색을 예로 들어)
output = cosyvoice.inference_sft('안녕하세요. 저는 인공지능 음성비서입니다.', '중국 여자')
# 메시지 저장
torchaudio.save('output.wav', 출력['tts_speech'], cosyvoice.sample_rate)
참고: Windows에 설치하는 중 다음과 같은 문제가 발생하는 경우sox또는 컴파일 오류가 발생하면 GitHub Issue #1046을 참조하거나 원클릭 설치 패키지를 사용해 보세요.
수입 OS
수입 토치
토치오디오 가져오기
다시 가져오기
cosyvoice.cli.cosyvoice에서 CosyVoice 가져오기
#CosyVoice2 모델 초기화
# 경로가 코어 가중치와 구성 파일이 포함된 폴더를 가리키는지 확인하세요.
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')
def 세그먼트_텍스트(텍스트, 제한=80):
"""
음성 생성이 중단되거나 메모리 오버플로가 발생하지 않도록 긴 기사를 구두점을 기준으로 적절한 길이의 세그먼트로 나눕니다.
"""
# 중국어와 영어의 일반적인 문장 끝 구두점을 잠급니다.
패턴 = r'([.!?;!\?\n])'
부품 = re.split(패턴, 텍스트)
덩어리 = []
현재 = ""
i가 범위(0, len(parts)-1, 2)에 있는 경우:
문장 = 부분[i] + 부분[i+1]
len(현재) + len(문장) <= 제한인 경우:
현재 += 문장
그 외:
현재인 경우:
청크.추가(현재.스트립())
현재=문장
현재인 경우:
청크.추가(현재.스트립())
[c인 경우 청크 단위로 c에 대한 c]를 반환합니다.
def run_tts_pipeline(text, spk_id, file_name):
"""
긴 텍스트 추론을 수행하고 Tensor 수준에서 정보를 결합합니다.
"""
text_list = 세그먼트_텍스트(텍스트)
결합_텐서 = []
print(f"처리 중, 기사가 {len(text_list)} 섹션으로 나누어졌습니다.")
idx의 경우 enumerate(text_list)의 세그먼트:
# CosyVoice2 추론 인터페이스 호출
# 참조 오디오를 사용하기 위해 inference_zero_shot으로 전환할 수 있습니다.
결과 = cosyvoice.inference_sft(세그먼트, spk_id)
Combined_tensors.append(결과['tts_speech'])
print(f"완료됨: {idx + 1}/{len(text_list)}")
Combined_tensors인 경우:
# 원활한 접합을 위해 torch.cat 사용
final_audio = torch.cat(combined_tensors, 희미한=1)
# wav로 저장하세요. 권장 샘플링 속도는 22050Hz입니다.
torchaudio.save(파일 이름, 최종 오디오, 22050)
print(f"작업 성공! 파일 저장 위치: {file_name}")
__name__ == "__main__"인 경우:
long_content = "여기에 긴 기사의 내용을 붙여넣으면 이 코드가 자동으로 분할 및 병합을 처리합니다."
run_tts_pipeline(long_content, '중국 여성', 'output_v2.wav')
수입 토치
토치오디오 가져오기
다시 가져오기
cosyvoice.cli.cosyvoice에서 CosyVoice 가져오기
#CosyVoice 2 초기화
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')
def format_srt_time(초):
"""초를 SRT 시간 형식으로 변환합니다. HH:MM:SS,mmm"""
밀리초 = int((초 - int(초)) * 1000)
초 = 정수(초)
분, 초 = divmod(초, 60)
시, 분 = divmod(분, 60)
f"{시간:02}:{분:02}:{초:02},{밀리초:03}"를 반환합니다.
def generate_audio_and_srt(full_text,peaker_id,output_wav,output_srt):
# 문장 부호에 따라 긴 기사를 나눕니다.
세그먼트 = re.split(r'([.!?!;!\?\n])', full_text)
덩어리 = []
범위(0, len(세그먼트)-1, 2)에 있는 i의 경우:
텍스트 = (세그먼트[i] + 세그먼트[i+1]).strip()
텍스트인 경우:chunks.append(text)
audio_list = []
srt_entries = []
현재_시간 = 0.0
샘플_레이트 = 22050
print(f"{len(chunks)} 텍스트 처리 시작...")
i의 경우 열거된 청크(청크):
# 음성 텐서를 생성하는 추론
출력 = cosyvoice.inference_sft(청크, 스피커_id)
audio_tensor = 출력['tts_speech']
audio_list.append(audio_tensor)
# 이 오디오 세그먼트가 지속되는 시간(텐서 길이 / 샘플링 속도)을 계산합니다.
기간 = audio_tensor.shape[1] / 샘플_레이트
end_time = 현재_시간 + 기간
# SRT 항목 생성
srt_entries.append(
f"{i+1}\n"
f"{format_srt_time(현재_시간)} --> {format_srt_time(end_time)}\n"
f"{청크}\n"
)
current_time = 종료_시간
print(f"세그먼트 {i+1} 정렬 완료")
# 오디오 병합 및 저장
Combined_audio = torch.cat(audio_list, 희미한=1)
torchaudio.save(output_wav, Combined_audio, 샘플_레이트)
# SRT 파일 저장
open(output_srt, 'w', 인코딩='utf-8')을 f로 사용:
f.write("\n".join(srt_entries))
print(f"완료되었습니다! 오디오: {output_wav}, 자막: {output_srt}")
__name__ == "__main__"인 경우:
기사 = "이것은 긴 기사 예입니다. [웃음] 각 문장의 시간을 정확하게 계산할 수 있습니다. 이런 식으로 Kdenlive로 가져올 때 자동으로 정렬됩니다."
generate_audio_and_srt(기사, '중국 여성', 'output.wav', 'output.srt')
수입 OS
수입 토치
토치오디오 가져오기
다시 가져오기
cosyvoice.cli.cosyvoice에서 CosyVoice 가져오기
#모델 초기화
cosyvoice = CosyVoice('pretrained_models/CosyVoice2-0.5B')
def 세그먼트_텍스트_with_tags(텍스트, 제한=100):
"""
[웃음]과 같은 태그가 잘리지 않도록 하면서 긴 텍스트를 분할합니다.
"""
# 중국어 구두점과 개행 문자를 일치시킵니다.
패턴 = r'([.!?;!\?\n])'
부품 = re.split(패턴, 텍스트)
덩어리 = []
현재 = ""
i가 범위(0, len(parts)-1, 2)에 있는 경우:
문장 = 부분[i] + 부분[i+1]
len(현재) + len(문장) <= 제한인 경우:
현재 += 문장
그 외:
현재인 경우:
청크.추가(현재.스트립())
현재=문장
현재인 경우:
청크.추가(현재.스트립())
청크 반환
def generate_expressive_audio(text, spk_id, 출력_경로):
"""
감정적인 지시가 포함된 긴 연설을 생성합니다.
"""
세그먼트 = 세그먼트_텍스트_with_tags(텍스트)
audio_data = []
idx의 경우 열거(세그먼트)의 세그먼트:
# 더 나은 태그 실행을 위해 지시 모드를 사용합니다.
# sft 모드를 사용하면 기본 태그도 지원되지만 감정 조절에는 지시 모드가 더 정확합니다.
출력 = cosyvoice.inference_instruct(seg, spk_id, '조절 톤 및 감정')
audio_data.append(출력['tts_speech'])
print(f"단락 {idx+1}/{len(segments)} 처리 중")
audio_data인 경우:
final_wav = torch.cat(audio_data, 희미한=1)
torchaudio.save(output_path, final_wav, 22050)
print(f"감정 명령이 포함된 메시지가 저장되었습니다: {output_path}")
__name__ == "__main__"인 경우:
#예: 감정 태그가 포함된 긴 텍스트
rich_text = "좋은 소식이네요! [웃음] 믿을 수가 없어요. [놀람] 하지만 이게 엉망이 되면 [화] 엄청 화낼 거예요."
generate_expressive_audio(rich_text, '중국 여성', 'expressive_output.wav')
ASR(자동 음성 인식) 시스템 개발은 일반적으로 다음과 같은 핵심 경로를 따릅니다. 첫 번째는오디오 전처리(소음 감소, VAD 음성 활동 감지 및 특징 추출 등) 그런 다음 입력모델 추론, 음향 신호를 텍스트 확률로 변환합니다. 마침내 통해후처리(구두점 복구, 역 텍스트 정규화 ITN 등)을 수행하여 최종 텍스트를 생성합니다. 현대의 개발 추세는 전통적인 HMM에서 "End-to-End" 신경망 아키텍처로 전환되어 개발 복잡성이 크게 단순화되었습니다.
| 범주 | 도구/모델 | 2026년 개발 기능 |
|---|---|---|
| 기본 모델 | OpenAI Whisper (V3) | 강력한 노이즈 내성과 다국어 지원을 갖춘 업계 표준으로 긴 오디오 파일을 복사하는 데 가장 적합합니다. |
| 라이브 스트리밍 | NVIDIA Parakeet-TDT | 대기 시간이 매우 짧도록 설계되었으며 스트리밍을 지원하며 AI 음성 도우미에 적합합니다. |
| 국내 최적화 | FunASR / Yating 엔진 | 중국어, 중국어-영어 혼합 및 대만어 악센트에 최적화되어 있으며 타임스탬프 및 화자 인식을 지원합니다. |
| 배포 프레임워크 | Faster-Whisper / Sherpa-ONNX | 추론 속도를 크게 향상시키고 메모리 사용량을 줄여 에지 장치나 로컬 서버에서 실행하는 데 적합합니다. |
ASR 시스템 개발 시 모니터링에 집중CER(문자 오류율)정확성을 평가합니다. 즉시 적용하려면,RTF(실시간 요소)그리고숨어 있음결정적으로 음성 처리가 말하는 것보다 훨씬 빠른지 확인하는 것이 중요합니다. 2026년 개발 초점은 전문 용어나 특정 산업의 식별 편향을 바로잡기 위해 LLM을 통합하는 등 '긴 텍스트 메모리'와 '맥락 인식'으로 전환되었습니다.
개발자가 빠른 출시를 추구하는 경우 일반적으로 클라우드 API를 호출합니다.Deepgram그리고AssemblyAI낮은 대기 시간과 풍부한 메타데이터(예: 감정 감지, 주요 요약)로 인해 2026년에 선호될 것입니다.Microsoft Azure Speech SDK가장 완벽한 맞춤형 모델 미세 조정(Custom Speech) 인터페이스를 제공하여 개발자가 특정 분야의 텍스트 데이터를 업로드하여 의료, 법률 등 특수 어휘의 부정확한 인식 문제를 해결할 수 있도록 합니다.
개인 개발자의 경우 다음을 사용하는 것이 좋습니다.Hugging Face Transformers도서관 매칭PyTorch빠른 실험을 실행해 보세요. 애플리케이션 시나리오에 개인 정보 보호(예: 의료 기록)가 포함된 경우 다음을 사용해야 합니다.Whisper.cpp또는Vosk완전히 오프라인 로컬 배포를 수행합니다. 대규모 음성 서비스 구축이 필요하다면,Triton Inference Server또는Docker컨테이너화 기술을 사용하면 ASR 모델의 효율적인 일정 관리 및 확장이 가능합니다.
HTML5<canvas>요소는 JavaScript를 사용하여 그릴 수 있는 영역으로, 웹 페이지에서 2D 및 3D를 렌더링할 수 있습니다.
이미지. 선 그리기, 그래픽, 그림 등 프로그래밍 코드를 통해 그리기 작업을 수행할 수 있는 컨테이너입니다. 실시간 생성이 필요한 게임, 그래픽 편집 등의 애플리케이션에 적합합니다.
다음은canvas요소의 기본 구문:
<canvas id="myCanvas" width="500" height="500"></canvas>
~에 있다canvas요소에 콘텐츠를 그리려면 다음을 사용해야 합니다.getContext방법. 이 방법을 사용하면 그리기 컨텍스트를 얻을 수 있으며 현재 가장 일반적으로 사용되는 옵션은 "2d"입니다. 그것은 a를 반환할 것이다CanvasRenderingContext2D다양한 그리기 방법을 제공하는 개체입니다.
예를 들어, 다음 JavaScript 코드는canvas2D 도면 컨텍스트:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
사용getContext("2d")획득된 그리기 컨텍스트는 선 그리기, 직사각형 그리기, 색상 채우기 등 기본적인 그리기 작업을 수행할 수 있습니다. 예를 들어:
moveTo(x, y)그리고lineTo(x, y)선분을 정의하고 사용하는 방법stroke()선을 그립니다.fillRect(x, y, width, height)채워진 직사각형을 그리거나strokeRect(x, y, width, height)속이 빈 직사각형을 그립니다.fillStyle예를 들어 채우기 색상을 설정합니다.ctx.fillStyle = "blue";샘플 코드:
ctx.fillStyle = "파란색";
ctx.fillRect(50, 50, 100, 100); // 파란색 직사각형을 그립니다.
ctx.StrokeStyle = "빨간색";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.스트로크(); //빨간색 선을 그린다
지우다canvas의 이미지를 사용할 수 있습니다clearRect(x, y, width, height)방법. 예를 들어 전체 캔버스를 지우는 코드는 다음과 같습니다.
ctx.clearRect(0, 0, canvas.width, canvas.height);
사용requestAnimationFrame()부드러운 애니메이션 효과를 얻을 수 있습니다. 매번 화면을 업데이트하기 전에 이전 프레임의 내용을 지워서 역동적인 효과를 그릴 수 있습니다. 다음은 간단한 애니메이션 예입니다.
함수 그리기() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 50, 50); // 정사각형 그리기
x += 1; // 위치 업데이트
requestAnimationFrame(draw);
}
그리다();
Canvas의 크기는 HTML로 설정해야 합니다. CSS를 사용하여 크기를 변경하면 이미지가 왜곡될 수 있습니다. 또한,canvas고해상도 이미지를 대체하기 위한 것이 아니라 인스턴트 생성 및 동적 드로잉에 사용됩니다.
style.transformCSS의 속성 중 하나이며 요소에 대한 회전, 크기 조정, 변위 및 기울기와 같은 2D 또는 3D 변환 작업을 수행하는 데 사용할 수 있습니다.
scale()이는 "줌" 기능이며 구문은 다음과 같습니다.
transform: scale(sx [, sy]);
안에:
sx:수평 줌 배율sy: 수직 스케일링 인자 (생략가능, 생략시 와 같음)sx)const el = document.getElementById("대상");
el.style.transform = "scale(1.5)"; // x와 y가 모두 1.5배 확대됩니다.
el.style.transform = "규모(1.5, 0.5)"; // 가로로 1.5배 확대하고 세로로 절반으로 줄입니다.
---
scale()요소의 실제 DOM 속성을 변경하지 않는 "시각적 변환"입니다(예:offsetWidth또는clientWidth), 그러나 변경될 예정입니다.getBoundingClientRect()반환 값.
el.getBoundingClientRect().width // 규모의 영향을 반영합니다.
el.offsetWidth //원래 너비, 배율의 영향을 받지 않음
---
<style>
#box {
width: 100px;
height: 100px;
background: skyblue;
transition: transform 0.3s;
}
#box:hover {
transform: scale(1.5);
}
</style>
<div id="box"></div>
---
다음 예는 HTML에서 가져온 것입니다.<table>데이터 읽기, 네이티브 사용<canvas>아피스arc()외부 패키지 없이 원형 차트를 그립니다.
<table id="dataTable" border="1" style="margin:10px auto;">
범주 값
<tr><td>애플</td><td>30</td></tr>
<tr><td>바나나</td><td>15</td></tr>
<tr><td>체리</td><td>25</td></tr>
<tr><td>망고</td><td>20</td></tr>
</테이블>
<canvas id="pieCanvas" width="400" height="400" style="display:block; margin:auto; border:1px solid #aaa;"></canvas>
---
const table = document.getElementById("dataTable");
const canvas = document.getElementById("pieCanvas");
const ctx = canvas.getContext("2d");
const labels = [];
const values = [];
for (let i = 1; i < table.rows.length; i++) { // 跳過表頭
const row = table.rows[i];
labels.push(row.cells[0].textContent);
values.push(parseFloat(row.cells[1].textContent));
}
// 計算總和
const total = values.reduce((a, b) =>a + b, 0);
//원형 차트 그리기
startAngle = 0으로 설정합니다.
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
상수 반경 = 120;
// 자동 색상 일치
const colors = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"];
for (나는 = 0이라고 하자; 나는< values.length; i++) {
const sliceAngle = (values[i] / total) * 2 * Math.PI;
const endAngle = startAngle + sliceAngle;
// 畫圓餅區塊
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = colors[i % colors.length];
ctx.fill();
// 標示文字
const midAngle = startAngle + sliceAngle / 2;
const textX = centerX + Math.cos(midAngle) * (radius + 20);
const textY = centerY + Math.sin(midAngle) * (radius + 20);
ctx.fillStyle = "black";
ctx.font = "14px sans-serif";
ctx.textAlign = "center";
ctx.fillText(labels[i], textX, textY);
startAngle = endAngle;
}
// 標題
ctx.font = "16px bold sans-serif";
ctx.textAlign = "center";
ctx.fillText("水果銷售比例", centerX, centerY - radius - 30);
---
arc()각 섹터를 그립니다.마우스 이벤트(예: 마우스를 올려 확대하거나 백분율 표시)를 추가하거나 다음을 사용할 수 있습니다.requestAnimationFrame()애니메이션 효과를 추가하세요. 데이터 백분율을 표시하는 마우스 호버 버전을 추가하는 데 도움을 주시겠습니까?
SVG(Scalable Vector Graphics)는 웹 페이지에 선, 그래픽, 텍스트를 그릴 수 있는 XML 기반 벡터 그래픽 형식이며 크기 조정 및 애니메이션을 지원합니다. 비트맵과 달리 SVG는 확대하거나 축소해도 왜곡되지 않으므로 차트, ICON, 지도, 순서도와 같은 응용 프로그램에 적합합니다.
<svg width="200" height="100">
<Rect x="10" y="10" width="50" height="50" fill="blue" />
<circle cx="100" cy="35" r="25" fill="green" />
<line x1="150" y1="10" x2="190" y2="60" 스트로크="빨간색" 스트로크-너비="2" />
<text x="10" y="90"font-size="14" fill="black">SVG입니다</text>
</svg>
<rect>:구형<circle>: 둥근<ellipse>:타원형<line>: 선분<polyline>、<polygon>: 폴리라인과 폴리곤<path>: 자유로운 그리기 경로(곡선 및 복잡한 모양을 그릴 수 있음)<text>:텍스트<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="orange" onclick="alert('원을 클릭했습니다.')" />
</svg>
투과성CSS또는<animate>라벨 애니메이션:
<circle cx="30" cy="50" r="20" fill="blue">
<animate attributeName="cx" from="30" to="170" dur="2s" repeatCount="indefinite" />
</circle>
<svg id="mysvg" width="200" height="100">
<circle id="c1" cx="50" cy="50" r="30" fill="gray" />
</svg>
<script>
document.getElementById("c1").setAttribute("fill", "red");
</script>
SVG는 웹 프런트엔드에서 매우 중요한 그래픽 표준 중 하나입니다. 고해상도, 상호작용성, 애니메이션을 갖추고 있으며 HTML/CSS/JavaScript와 원활하게 통합될 수 있습니다. 정확하고 확장 가능한 성능이 필요한 그래픽 표현 시나리오에 적합합니다.
다음을 통해 SVG로 사용 가능<symbol>또는<defs>패턴을 한 번 정의하고 다시 사용<use>다른 곳에서 참조를 반복하여 코드를 저장하고 일관성을 향상하세요.
<svg width="0" height="0" style="position:absolute">
<symbol id="star" viewBox="0 0 100 100">
<polygon points="50,5 61,39 98,39 68,59 79,91 50,70 21,91 32,59 2,39 39,39"
fill="gold" stroke="black" stroke-width="2"/>
</symbol>
</svg>
<svg width="200" height="100">
<use href="#star" x="0" y="0" width="50" height="50"/>
<use href="#star" x="60" y="0" width="50" height="50" fill="red"/>
<use href="#star" x="120" y="0" width="50" height="50" fill="blue"/>
</svg>
<symbol>: 패턴 내용을 정의하여 반복적으로 사용할 수 있습니다.<use>: 삽입 패턴, 위치, 크기 지정 가능href: 기호의 ID를 가리킵니다(기존 쓰기 방식은xlink:href)<use>변경 가능fill、stroke및 기타 속성은 원래 정의를 덮어씁니다.
<use href="#id">현대적인 글쓰기(이전 브라우저에서 사용됨)xlink:href)<symbol>DOM 상단에 배치하거나 완전히 숨깁니다.~을 통해<symbol> + <use>, SVG는 재사용이 가능하고 스타일과 위치를 편리하게 관리할 수 있는 구성 요소화된 모듈식 그래픽 개발을 실현할 수 있습니다. 그래픽 디자인 및 데이터 시각화 애플리케이션에 매우 적합합니다.
WebGL(Web Graphics Library)은 브라우저에서 HTML5를 사용할 수 있는 OpenGL ES 기반의 JavaScript API 세트입니다.<canvas>Elements는 플러그인 없이 2D 및 3D 그래픽의 하드웨어 가속 그리기를 수행합니다.
색상이 지정된 삼각형을 그립니다.
<canvas id="glCanvas" width="300" height="300"></canvas>
<스크립트>
const 캔버스 = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
만약 (!gl) {
Alert("귀하의 브라우저는 WebGL을 지원하지 않습니다.");
}
const vertexShaderSource = `
속성 vec2 a_position;
무효 메인() {
gl_Position = vec4(a_position, 0, 1);
}
`;
const 조각ShaderSource = `
무효 메인() {
gl_FragColor = vec4(1, 0, 0, 1); // 빨간색
}
`;
함수 createShader(gl, 유형, 소스) {
const 쉐이더 = gl.createShader(type);
gl.shaderSource(셰이더, 소스);
gl.compileShader(셰이더);
셰이더 반환;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
constragmentShader = createShader(gl, gl.FRAGMENT_SHADER,fragmentShaderSource);
const 프로그램 = gl.createProgram();
gl.attachShader(프로그램, vertexShader);
gl.attachShader(프로그램,fragmentShader);
gl.linkProgram(프로그램);
gl.useProgram(프로그램);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 새로운 Float32Array([
0, 1,
-1, -1,
1, -1
]), gl.STATIC_DRAW);
const posAttribLoc = gl.getAttribLocation(프로그램, "a_position");
gl.enableVertexAttribArray(posAttribLoc);
gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</스크립트>
WebGL은 웹 개발자에게 GPU 가속 3D 그래픽 렌더링 기능을 제공하며 현대 웹 게임, 디지털 아트, 시뮬레이션 및 시각화를 위한 핵심 기술 중 하나입니다. 기본 WebGL은 상대적으로 낮은 수준이지만 고차 함수 라이브러리와 함께 사용하여 개발 프로세스를 단순화할 수 있습니다.
Spirograph복잡한 모양을 만드는 데 사용되는 기하학적 패턴입니다. 원리는 두 개의 원의 회전을 사용하여 여러 개의 원과 물결 모양의 곡선을 묘사하는 것입니다. 이러한 유형의 그래픽은 수학의 기하학적 아름다움을 보여주기 위해 예술적 창작과 교육에 자주 사용됩니다.
다음은 HTML5의 <canvas>를 사용하여 Spirograph를 구현하는 예입니다. 요소 및 JavaScript:
| 도서관 이름 | 문법적 표현력 | 그래픽 유형 | 물체에 적합 | 상호작용 지원 여부 | 애니메이션 지원 여부 |
|---|---|---|---|---|---|
| Mermaid.js | 매우 높음(Markdown과 유사한 구문 사용) | 플로우 차트, 시퀀스 차트, 간트 차트, ER 차트, 클래스 차트 | 문서 시각화 및 신속한 프로토타이핑 | 제한된 지원 | 부분적인 지원 |
| D3.js | 중간(데이터 바인딩 및 DOM 작업을 이해해야 함) | 거의 모든 그래픽(매우 사용자 정의 가능) | 고급 데이터 시각화 개발자 | 전폭적인 지원 | 전폭적인 지원 |
| Cytoscape.js | 높음(JSON에 정의된 노드 및 에지) | 네트워크 다이어그램, 흐름도 | 생물정보학, 소셜 네트워크 분석 | 전폭적인 지원 | 부분적인 지원 |
| Vega / Vega-Lite | 높음(차트의 JSON 선언적 설명 사용) | 통계 차트(막대 차트, 분산형 차트 등) | 데이터 과학, 대시보드 디자인 | 지원하다 | 부분적인 지원 |
| Graphviz via Viz.js | 높음(DOT 구문은 텍스트 프로그래밍과 유사함) | 흐름도, 그래프 이론 구조 | 학술용, 빠른 아키텍처 다이어그램 | 지원되지 않음 | 지원되지 않음 |
| JSXGraph | 높음(기하학적 의미가 명확함) | 기하학적 도형, 좌표계 | 수학 교육 | 지원하다 | 지원하다 |
Chart.js는 가볍고 강력한 오픈 소스 JavaScript 차트 그리기 기능 라이브러리입니다.
HTML5에서 사용 가능<canvas>요소에 대한 다양한 대화형 다이어그램을 그립니다.
간단한 API, 아름다운 기본 스타일 및 고도로 사용자 정의 가능한 옵션으로 유명합니다.
웹사이트나 애플리케이션의 데이터를 빠르게 시각화하는 데 적합합니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
npm install chart.js
<canvas id="myChart"></canvas>
<스크립트>
const ctx = document.getElementById('myChart').getContext('2d');
새 차트(ctx, {
유형: '바',
데이터: {
라벨: ['빨간색', '파란색', '노란색', '녹색', '보라색', '주황색'],
데이터세트: [{
라벨: '투표',
데이터: [12, 19, 3, 5, 2, 3],
배경색상: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)'
],
국경 폭: 1
}]
},
옵션: {
반응형: 사실,
저울: {
y: { startAtZero: 참 }
}
}
});
</스크립트>
---
| 차트 종류 | 세트 유형 | 사용 지침 |
|---|---|---|
| 꺾은선형 차트 | line | 시계열 또는 추세 데이터를 표시합니다. |
| 막대 차트 | bar | 다양한 카테고리의 값을 비교해보세요. |
| 원형 차트 | pie | 전체적인 비례분포를 보여줍니다. |
| 도넛 차트 | doughnut | 원형 차트의 변형으로 중앙을 비워 제목을 표시할 수 있습니다. |
| 레이더 차트 | radar | 다차원 데이터의 비교. |
| 극지방 지도 | polarArea | 둥근 케이크와 스트립을 결합한 효과. |
다음을 사용하여 Chart.js 버전을 확인할 수 있습니다.
console.log(Chart.version);
---
다음 예에서는 HTML을 추출하는 방법을 보여줍니다.<table>데이터를 읽고 JavaScript를 사용하여 원형 차트를 동적으로 그립니다. 이 예제에서는Chart.js, 사용하기 쉽고 자동 색상 일치 및 애니메이션을 지원합니다.
<!-- 테이블 데이터 -->
<table id="dataTable" border="1" style="margin:10px auto;">
범주 값
<tr><td>애플</td><td>30</td></tr>
<tr><td>바나나</td><td>15</td></tr>
<tr><td>체리</td><td>25</td></tr>
<tr><td>망고</td><td>20</td></tr>
</테이블>
<!-- 원형 차트 컨테이너 -->
<canvas id="pieChart" width="400" height="400"></canvas>
<!-- Chart.js 로드 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
---
//테이블 데이터 읽기
const table = document.getElementById("dataTable");
const 레이블 = [];
const 값 = [];
for (나는 = 1이라고 하자; 나는< table.rows.length; i++) { // 跳過表頭
const row = table.rows[i];
labels.push(row.cells[0].textContent);
values.push(parseFloat(row.cells[1].textContent));
}
// 建立 Chart.js 圓餅圖
const ctx = document.getElementById("pieChart").getContext("2d");
new Chart(ctx, {
type: "pie",
data: {
labels: labels,
datasets: [{
data: values,
backgroundColor: [
"rgba(255, 99, 132, 0.7)",
"rgba(54, 162, 235, 0.7)",
"rgba(255, 206, 86, 0.7)",
"rgba(75, 192, 192, 0.7)"
],
borderColor: "white",
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
legend: { position: "bottom" },
title: { display: true, text: "水果銷售比例" }
}
}
});
---
table수동 정의 없이 데이터를 동적으로 검색합니다.type: "pie"~을 위한"doughnut"도넛형 차트로 전환할 수 있습니다.(외부 라이브러리를 사용하지 않고) 순수 JavaScript로 그리려면 다음을 사용할 수 있습니다.CanvasRenderingContext2D.arc()부채 모양을 직접 그려보세요. "Chart.js가 없는" 버전을 보여드릴까요?
HTML에서는 다음을 사용할 수 있습니다.<svg>기본 UML 클래스 다이어그램을 그리는 태그입니다. 다음은 직사각형과 텍스트를 사용하여 간단한 카테고리를 나타내는 방법에 대한 예입니다.
<svg width="300" height="200">
<rect x="50" y="20" width="200" height="30" fill="lightblue" stroke="black"/>
<text x="60" y="40" font-family="Arial" font-size="16">Class Name</text>
<rect x="50" y="50" width="200" height="50" fill="white" stroke="black"/>
<text x="60" y="70" font-family="Arial" font-size="14">+ attribute1 : Type</text>
<text x="60" y="90" font-family="Arial" font-size="14">+ attribute2 : Type</text>
<rect x="50" y="100" width="200" height="50" fill="white" stroke="black"/>
<text x="60" y="120" font-family="Arial" font-size="14">+ method1() : ReturnType</text>
<text x="60" y="140" font-family="Arial" font-size="14">+ method2() : ReturnType</text>
</svg>
HTML 및 CSS 스타일을 사용하여 다양한 UML 요소를 정의할 수 있습니다. 다음 예에서는 사용 방법을 보여줍니다.<div>그리고CSS카테고리 상자를 그리고 UML을 모방하도록 스타일을 조정합니다.
카테고리 다이어그램의 구조.
<style>
.class-box {
width: 200px;
border: 1px solid black;
margin: 10px;
}
.header {
background-color: lightblue;
text-align: center;
font-weight: bold;
}
.attributes, .methods {
padding: 10px;
border-top: 1px solid black;
}
</style>
<div class="class-box">
<div class="header">ClassName</div>
<div class="attributes">
+ attribute1 : Type <br>
+ attribute2 : Type
</div>
<div class="methods">
+ method1() : ReturnType <br>
+ method2() : ReturnType
</div>
</div>
HTML로 더 복잡한 UML 다이어그램을 그리려면 mermaid.js와 같은 외부 JavaScript 라이브러리를 사용할 수 있습니다. 다양한 UML 다이어그램을 지원하며 HTML에 직접 포함될 수 있습니다. 먼저 mermaid.js를 참조한 다음 다음을 사용해야 합니다.<pre>태그는 UML 다이어그램 정의를 구성합니다.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
<pre class="mermaid">
classDiagram
Class01 <|-- Class02 : Inheritance
Class01 : +method1() void
Class02 : +method2() void
Class03 : +attribute int
Class04 : +method() void
</pre>
classDiagram
Class01 <|-- Class02 : Inheritance
Class01 : +method1() void
Class02 : +method2() void
Class03 : +attribute int
Class04 : +method() void
이러한 예제는 mermaid.js를 사용하여 보다 복잡하고 명확한 UML 다이어그램을 쉽게 그릴 수 있으며 다양한 다이어그램 유형을 지원합니다.
이 예에서는 카테고리 간의 상속, 구성, 집계 및 연관을 보여줍니다.
<pre class="mermaid">
classDiagram
Animal <|-- Mammal
Animal <|-- Bird
Mammal o-- Dog : has-a
Bird --> Wing : has-a
class Animal {
+String name
+int age
+eat() void
}
class Mammal {
+hasFur() bool
}
class Dog {
+bark() void
}
class Bird {
+fly() void
}
class Wing {
+wingSpan int
}
</pre>
classDiagram
Animal <|-- Mammal
Animal <|-- Bird
Mammal o-- Dog : has-a
Bird --> Wing : has-a
class Animal {
+String name
+int age
+eat() void
}
class Mammal {
+hasFur() bool
}
class Dog {
+bark() void
}
class Bird {
+fly() void
}
class Wing {
+wingSpan int
}
설명하다:이 예에서는 여러 관계를 보여줍니다.
Animal예Mammal그리고Bird슈퍼 카테고리.Mammal그리고Dog의 조합 관계o--표현하다.Bird그리고Wing집계 관계-->표현하다.이 예에서는 다중성(1..*, 0..1 등)과 범주 간 역할을 나타내는 방법을 보여줍니다.
<pre class="mermaid">
classDiagram
Customer "1" --> "0..*" Order : places
Order "1" --> "1" Payment : includes
class Customer {
+String name
+String email
+placeOrder() void
}
class Order {
+int orderId
+String date
+calculateTotal() float
}
class Payment {
+float amount
+String method
+processPayment() void
}
</pre>
classDiagram
Customer "1" --> "0..*" Order : places
Order "1" --> "1" Payment : includes
class Customer {
+String name
+String email
+placeOrder() void
}
class Order {
+int orderId
+String date
+calculateTotal() float
}
class Payment {
+float amount
+String method
+processPayment() void
}
설명하다:
Customer여러 개 가질 수 있음Order, 각Order모두 하나에 해당합니다.Payment。places그리고includes)。이 예에서는 Mermaid.js에서 인터페이스와 추상 클래스를 정의하는 방법을 보여줍니다.
<pre class="mermaid">
classDiagram
class Shape {
<<_abstract_>>
+area() float
+perimeter() float
}
Shape <|-- Rectangle
Shape <|-- Circle
class Rectangle {
+width float
+height float
+area() float
+perimeter() float
}
class Circle {
+radius float
+area() float
+perimeter() float
}
</pre>
classDiagram
class Shape {
<<_abstract_>>
+area() float
+perimeter() float
}
Shape <|-- Rectangle
Shape <|-- Circle
class Rectangle {
+width : float
+height : float
+area() float
+perimeter() float
}
class Circle {
+radius : float
+area() float
+perimeter() float
}
설명하다:
Shape추상적인 범주입니다.<<abstract>>표시.Rectangle그리고Circle물려받은Shape그리고 그 메소드를 구현합니다.이 예에서는 클래스 상속과 인터페이스 구현의 혼합을 보여줍니다.
<pre class="mermaid">
classDiagram
class Flyable {
<<_interface_>>
+fly() void
}
class Bird {
+String species
+String color
+sing() void
}
class Airplane {
+String model
+int capacity
+takeOff() void
}
Bird ..|> Flyable : implements
Airplane ..|> Flyable : implements
</pre>
classDiagram
class Flyable {
<<_interface_>>
+fly() void
}
class Bird {
+String species
+String color
+sing() void
}
class Airplane {
+String model
+int capacity
+takeOff() void
}
Bird ..|> Flyable : implements
Airplane ..|> Flyable : implements
설명하다:
Flyable인터페이스이며 정의합니다.fly()방법.Bird그리고Airplane모두 구현됨Flyable인터페이스, 사용..|>기호 표현.흐름도 TD
A[시작] --> B{계속하시겠습니까? }
B -- 예 --> C[작업 수행]
B -- 아니요 --> D[끝]
C --> D
인어공주 공식 제안Mermaid Live Editor, 구문 오류를 즉시 테스트하고 확인할 수 있습니다. Mermaid 구문을 붙여넣은 후 오류가 있는 경우 편집기에 특정 오류 메시지가 표시되므로 문제를 더 빨리 해결할 수 있습니다.
인어 차트가 너무 복잡하면 분할 테스트를 수행하는 것이 좋습니다. 예를 들어, 먼저 일부 범주나 관계를 제거하고 가장 기본적인 구조만 남겨두고 점차적으로 요소를 추가하면 문법 오류가 발생할 수 있는 원인을 더 빠르게 식별할 수 있습니다.
Mermaid.js의 버전에 따라 구문 지원이 다를 수 있습니다. 최신 버전을 사용하고 있는지 확인하거나 테스트 환경에서 귀하의 Mermaid.js 버전이 사용된 구문 기능을 지원하는지 확인하세요.
+attribute : type속성을 표시합니다.<|--또는-->)이 정확하면 이 기호는 범주형 관계를 나타내는 데 사용됩니다.<<abstract>>또는 기타 특수 표시는 하나씩 제거하거나 수정하여 오류 발생 여부를 확인하는 것이 좋습니다.브라우저의 개발자 도구에서 JavaScript 콘솔을 봅니다. Mermaid 차트가 올바르게 생성되지 않으면 구문 오류를 식별하는 데 도움이 되는 특정 오류 메시지나 팁이 콘솔에 표시될 수 있습니다.
Mermaid 공식 문서에서는 문법이 올바르게 사용되었는지 확인하는 데 도움이 되는 자세한 문법 지침을 제공합니다. 공식 문서는 다음 위치에 있습니다.Mermaid.js 공식 웹사이트。
다음은 결정과 행동 사이의 논리적 관계를 보여주는 간단한 흐름도 예입니다.
흐름도 TD
A[시작] --> B{계속하시겠습니까? }
B -- 예 --> C[작업 수행]
B -- 아니요 --> D[끝]
C --> D
위의 순서도 구문을 Markdown 편집기 또는 Mermaid 온라인 도구와 같은 Mermaid 지원 도구에 붙여넣어 그래프를 생성합니다.
이 JavaScript 라이브러리는 Mermaid.js 차트에 확장 가능한 슬라이더 기능을 추가하여 사용자가 다음을 수행할 수 있도록 합니다.<input type="range">차트의 크기 조정을 제어합니다. 도서관 이용transform: scale()인어를 다시 렌더링하지 않고도 시각적 크기 조정이 가능합니다.
// mermaidZoomSlider.js
내보내기 함수 setupMermaidZoomSlider({
SliderId = "zoomSlider",
DiagramContainerId = "mermaidContainer",
최소 = 0.1,
최대 = 3,
단계 = 0.1,
초기=1
} = {}) {
window.addEventListener("load", () => {
const 슬라이더 = document.getElementById(sliderId);
const 컨테이너 = document.getElementById(diagramContainerId);
if (!slider || !container) {
console.warn("인어 확대/축소 슬라이더: 슬라이더 또는 컨테이너 요소가 없습니다.");
반환;
}
//슬라이더 속성 초기화
슬라이더.min = 최소;
슬라이더.max = 최대;
슬라이더.단계 = 단계;
슬라이더.값 = 초기;
//초기 확대/축소 설정
Container.style.transformOrigin = "왼쪽 상단";
컨테이너.스타일.변형 = `scale(${initial})`;
//이벤트 수신: 확대/축소
Slider.addEventListener("input", () => {
const scale = parsFloat(slider.value);
Container.style.transform = `scale(${scale})`;
});
});
}
<!-- HTML -->
<div>
<input type="range" id="zoomSlider">
</div>
<div id="mermaidContainer">
<pre class="인어">
그래프 TD;
A-->B;
B-->C;
</pre>
</div>
<!-- JavaScript 모듈 소개 -->
<스크립트 유형="모듈">
"https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"에서 인어를 가져옵니다.
"./mermaidZoomSlider.js"에서 가져오기 { setupMermaidZoomSlider };
mermaid.initialize({ startOnLoad: true });
setupMermaidZoomSlider({
SliderId: "zoomSlider",
DiagramContainerId: "mermaidContainer",
최소: 0.2,
최대: 3,
단계: 0.1,
초기: 1
});
</스크립트>
드래그 및 이동, 확대/축소 재설정 등과 같은 고급 기능이 필요한 경우 마우스 드래그 및 확대/축소 재설정 버튼 통합 등 이 기능 라이브러리를 추가로 확장할 수 있습니다.
Mermaid.js 다이어그램에 사용됨-->、===>마커는 노드 간의 연결을 설정하는 데 사용됩니다. 다른 기호는 다른 선 스타일을 나타냅니다.
| 문법 | 스타일 | 설명하다 |
|---|---|---|
--> |
──> | 일반 실선 화살표 |
---> |
───> | 그리고-->동일(구문 허용) |
-- text --> |
── text ──> | 텍스트 레이블이 있는 실선 화살표 |
-.-> |
-.-> | 점선 화살표 |
-. text .-> |
-. text .-> | 텍스트가 있는 점선 화살표 |
==> |
===> | 두꺼운 실선 화살표 |
== text ==> |
== text ==> | 텍스트가 있는 두꺼운 화살표 |
--o |
──○ | 방향선이 없는 둥근 머리(클래스 다이어그램에서 일반적으로 사용됨) |
--|> |
──▷ | 실선 화살표(클래스 다이어그램에서 일반적으로 사용됨) |
--> | label | |
──> (양면 텍스트 포함) | Mermaid는 스타일 주석 태그를 지원합니다. |
그래프 TD
A[시작] --> B[1단계]
B -.-> C [비동기 처리]
C ==> D[강한 의존성]
D -- 텍스트 --> E [텍스트와의 연결]
E --o F[둥근 머리]
F --|> G[실선 화살표]
graph), 카테고리 맵(classDiagram), 상태 다이어그램 및 기타 스타일은 약간 다릅니다.Mermaid.js는 다양한 라인 구문 스타일을 제공하여 사용자가 프로세스, 논리 및 관계를 명확하게 표현할 수 있도록 합니다. 실선, 점선, 굵은 선, 그래픽 끝점의 조합을 통해 간단하고 잘 구성된 다이어그램을 만들 수 있습니다.
D3.js(Data-Driven Documents)는 데이터를 동적 및 대화형 시각화로 변환하기 위한 오픈 소스 JavaScript 기반 라이브러리입니다. SVG, HTML 등 웹 표준 기술을 사용합니다. CSS는 데이터를 조작하고 그래픽을 그리기 위한 강력한 도구를 제공합니다.
d3.select()그리고d3.selectAll()。
D3.js는 다음과 같은 다양한 데이터 시각화 시나리오에서 널리 사용됩니다.
D3.js를 배우려면 다음 리소스를 참조하세요.
D3.js는 고도로 맞춤화된 차트와 대화형 효과가 필요한 개발자를 위한 강력하고 유연한 데이터 시각화 도구입니다. 학습 곡선은 약간 높지만 일단 숙달되면 적용 가능성은 무궁무진합니다.
이 예에서는 D3.js를 사용하여 간단한 트리 다이어그램을 그려 계층 구조 데이터를 시각화하는 방법을 보여줍니다. 주요 단계는 다음과 같습니다.
tree()이 함수는 트리 레이아웃을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js Tree Diagram Example</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.node circle {
fill: steelblue;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
const width = 800;
const height = 600;
const treeData = {
name: "CEO",
children: [
{
name: "CTO",
children: [
{ name: "Engineering Manager" },
{ name: "Product Manager" }
]
},
{
name: "CFO",
children: [
{ name: "Accountant" },
{ name: "Finance Analyst" }
]
}
]
};
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,40)");
const treeLayout = d3.tree().size([height - 100, width - 160]);
const root = d3.hierarchy(treeData);
treeLayout(root);
svg.selectAll(".link")
.data(root.links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x)
);
const nodes = svg.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
nodes.append("circle").attr("r", 5);
nodes.append("text")
.attr("dy", 3)
.attr("x", d => d.children ? -10 : 10)
.style("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name);
</script>
</body>
</html>
이 코드를 실행하면 트리 다이어그램이 표시됩니다.
CEO)。CTO그리고CFO) 오른쪽으로 확장합니다.이 예는 더 복잡한 계층 구조로 확장되거나 다양한 요구 사항에 맞게 스타일이 조정될 수 있습니다. 예를 들어:
직사각형 트리맵은 중첩된 직사각형을 사용하여 계층적 데이터를 표시하는 시각화 기술입니다. 각 직사각형의 면적은 판매량이나 보관 규모 등의 수치를 나타내며, 각 직사각형을 더 중첩하여 하위 카테고리를 나타낼 수 있습니다.
Cytoscape.js는 네트워크 그래프(Graph)를 그리는 데 사용되는 JavaScript 라이브러리입니다. JSON을 사용하여 노드와 에지를 정의합니다. 간단한 구문을 가지며 상호 작용 및 스타일 사용자 정의를 지원합니다.
elements: 노드 및 에지 데이터 정의style: 색상, 화살표, 라벨 등 스타일 제어layout: 그래픽 배열(선택적인 그리드, 원, 코즈 등)classes노드 그룹 정의 및 다양한 스타일 할당| 도서관 이름 | 적용 가능성 | 특징 | 상호작용 지원 여부 | 설명하다 |
|---|---|---|---|---|
| JointJS | ★★★★★ | 높은 그리기 자유도와 확장 가능한 회로 구성 요소 기호 | ✔️ | 논리 회로와 흐름도를 그릴 수 있습니다. 무료 버전에는 충분한 기능이 있습니다. |
| GoJS | ★★★★☆ | 강력한 그래픽 및 데이터 모델 지원 | ✔️ | 무료 소프트웨어는 아니지만 무료 평가판이 있습니다. 생산 라인 다이어그램 및 회로도에 자주 사용됩니다. |
| SVG.js | ★★★☆☆ | 가볍고 정밀한 드로잉 지원 | ✔️ | 자체 설계 부품(저항, 커패시터 등) 필요, 세부 제어에 적합 |
| Konva.js | ★★★☆☆ | 캔버스와 SVG가 모두 지원됩니다. | ✔️ | 드래그 및 클릭과 같은 대화형 동작에 적합한 디자인 도구 |
| ELK.js | ★★☆☆☆ | 뛰어난 자동 레이아웃 | ✖️ | 레이아웃 알고리즘만 담당합니다(JointJS와 페어링 가능). |
이 도구는 다음과 같이 사용할 수 있습니다.x그리고y독립변수로z = f(x, y)방정식은 3D 표면 다이어그램으로 그려지며 회전, 크기 조정 및 이동을 위한 마우스 조작의 대화형 기능이 제공됩니다.
<div id="plot3d" style="너비:100%; 높이:600px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<스크립트 유형="모듈">
// 함수 z = f(x, y)를 정의합니다(어떤 방정식으로도 대체 가능).
함수 계산Z(x, y) {
return Math.sin(x) * Math.cos(y); // z = 죄(x) * cos(y)
}
const xRange = 숫자.linspace(-5, 5, 50);
const yRange = 숫자.linspace(-5, 5, 50);
//z 데이터 생성
const zValues = xRange.map(x =>
yRange.map(y => 계산Z(x, y))
);
const 데이터 = [{
유형: '표면',
x: x범위,
y: y범위,
z: z값,
색상 스케일: 'Viridis'
}];
const 레이아웃 = {
제목: 'z = sin(x) * cos(y)',
자동 크기 조정: true,
장면: {
xaxis: { 제목: 'X축' },
yaxis: { 제목: 'Y축' },
zaxis: { 제목: 'Z축' }
}
};
Plotly.newPlot('plot3d', 데이터, 레이아웃);
</스크립트>
<!-- 숫자.js는 linspace 배열을 생성하는 데 사용됩니다 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
z = Math.sin(x * y)→ 골판지z = x * x - y * y→ 안장 표면z = Math.exp(-(x * x + y * y))→ 가우스 피크이 예에서는 Plotly.js를 사용하여 대화형 3D 시각화를 제공하고,numeric.js를 사용하여 숫자 그리드 생성을 지원합니다. 자유롭게 바꾸시면 됩니다computeZ함수의 내용을 사용하여 3차원 표면을 그립니다.
3Dmol.js는 브라우저용으로 특별히 설계된 오픈 소스 WebGL 화학 분자 시각화 라이브러리로, 웹 페이지에 직접 분자 구조를 그릴 수 있습니다.
<div id="viewer" style="width:400px;height:400px;"></div>
<script src="https://3dmol.org/build/3Dmol-min.js"></script>
<스크립트>
const 뷰어 = $3Dmol.createViewer("viewer", { backgroundColor: "white" });
Viewer.addModel("C1=CC=CC=C1", "smi"); // 벤젠의 SMILES 구조
Viewer.setStyle({}, {스틱: {}, 구: {scale: 0.3}});
뷰어.zoomTo();
뷰어.렌더();
</스크립트>
ChemDoodle은 2D 및 3D 구조 도면을 제공하고 다양한 화학 형식을 지원하며 교육 및 웹 애플리케이션에 적합합니다.
JSmol은 Jmol의 JavaScript 버전으로, 단백질이나 결정 구조와 같은 큰 분자를 표시하는 데 적합합니다.
Mol*(MolStar)은 RCSB PDB에서 개발한 고차 구조 시각화 도구로, 생물학적 거대분자를 위해 특별히 설계되었습니다.
| 함수 라이브러리 | 주요 목적 | 오픈소스인가요? | 승인이 필요한지 여부 |
|---|---|---|---|
| 3Dmol.js | 범용 3D 분자 시각화 | ✅ | ❌ |
| ChemDoodle | 2D 및 3D 교육 및 디스플레이 | 부분 | ✅ |
| JSmol | 학술 연구 및 교육 | ✅ | ❌ |
| Mol* | 단백질 및 생체분자 시각화 | ✅ | ❌ |
이 예제에서는3Dmol.js그리고 채택하다XYZ 형식벤젠 분자의 원자 좌표를 정의하여 3D 분자 구조를 올바르게 표시합니다.
SMILES 형식("smi")을 사용하면 오류가 발생합니다.Unknown format: smi, 이 형식은 일부 3Dmol.js 버전에서 지원되지 않기 때문입니다.
benzene.html。python -m http.server)이 켜져 있습니다.http://localhost:8000결과를 봅니다.<!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8">
3Dmol.js는 벤젠 분자를 렌더링합니다
<script src="https://3dmol.org/build/3Dmol-min.js"></script>
<스타일>
#뷰어 {
너비: 600px;
높이: 600px;
위치: 상대;
테두리: 1px 단색 #aaa;
}
</스타일>
</머리>
<본문>
3Dmol.js 벤젠 분자 표시(XYZ 형식)
<div id="viewer"></div>
<스크립트>
document.addEventListener("DOMContentLoaded", function () {
const 뷰어 = $3Dmol.createViewer("viewer", { backgroundColor: "white" });
const xyzData = `
12
벤젠
C 0.0000 1.3968 0.0000
H 0.0000 2.4903 0.0000
C -1.2096 0.6984 0.0000
H -2.1471 1.2451 0.0000
C -1.2096 -0.6984 0.0000
H -2.1471 -1.2451 0.0000
C 0.0000 -1.3968 0.0000
H 0.0000 -2.4903 0.0000
C 1.2096 -0.6984 0.0000
H 2.1471 -1.2451 0.0000
C 1.2096 0.6984 0.0000
H 2.1471 1.2451 0.0000
`;
Viewer.addModel(xyzData, "xyz");
Viewer.setStyle({}, {스틱: {}, 구: {scale: 0.3}});
뷰어.zoomTo();
뷰어.렌더();
});
</스크립트>
</body>
</html>
file://HTML을 활성화합니다. 로컬 HTTP 서버를 사용하는 것이 좋습니다.Google Maps JavaScript API를 사용하면 개발자가 대화형 지도를 웹페이지에 삽입할 수 있습니다. 그리고 JavaScript를 통해 마커, 레이어, 텍스트 라벨 등의 맞춤 요소를 동적으로 추가할 수 있습니다. 다음 예에서는 지도를 표시하고 맞춤 마커를 추가하는 방법을 보여줍니다.
---이동Google Cloud Console, 할 수 있게 하다Maps JavaScript API,
그리고 API 키(API Key) 세트를 생성합니다.
획득 후 스크립트 로딩 시 추가?key=YOUR_API_KEY。
<!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8">
<title>맞춤 태그가 포함된 Google 지도</title>
<스타일>
#지도 {
너비: 100%;
높이: 500px;
}
</스타일>
</머리>
<본문>
<h3>내 지도</h3>
<div id="map"></div>
<!-- Google 지도 JS API 로드 -->
<스크립트 비동기
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</스크립트>
<스크립트>
함수 initMap() {
//지도 초기화
const center = { lat: 25.033964, lng: 121.564468 }; // 타이페이 101
const map = new google.maps.Map(document.getElementById("map"), {
줌: 14,
센터: 센터
});
//맞춤 태그 생성
const myTags = [
{ position: { lat: 25.034, lng: 121.565 }, title: "A 표시", content: "여기가 A 지점입니다" },
{ position: { lat: 25.036, lng: 121.562 }, title: "B 표시", content: "B 지점입니다" },
{ position: { lat: 25.032, lng: 121.568 }, title: "Mark C", content: "이것이 C 지점입니다" }
];
//정보창 생성(InfoWindow)
const infoWindow = new google.maps.InfoWindow();
//지도에 마커 추가
myTags.forEach(태그 => {
const 마커 = 새로운 google.maps.Marker({
위치: 태그.위치,
지도: 지도,
제목: 태그.제목,
아이콘: {
URL: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
}
});
// 클릭하면 정보가 표시됩니다.
marker.addListener("클릭", () => {
infoWindow.setContent("<b>" + tag.title + "</b><br>" + tag.content);
infoWindow.open(지도, 마커);
});
});
}
</스크립트>
</body>
</html>
---
icon자신을 위한 사진(PNG, SVG).google.maps.Polyline또는Polygon선과 영역을 그립니다.map.setMapTypeId('satellite')위성 모드로 전환합니다.| 재산 | 사용 |
|---|---|
center | 지도의 초기 중심 좌표를 설정합니다. |
zoom | 지도 확대/축소 수준(1~20). |
mapTypeId | 표시 스타일roadmap、satellite、hybrid、terrain。 |
icon | 사용자 정의 표시 아이콘. |
infoWindow | 마크를 클릭하면 정보창이 표시됩니다. |
브라우저에서 특정 MIDI 사운드(예: 기타)를 재생하려면 Web MIDI API를 사용하거나 더 간단하게 다음과 같은 SoundFont 플레이어가 있는 Web Audio API를 사용할 수 있습니다.SoundFont Player전부soundfont-player。
<script src="https://unpkg.com/[email protected]/dist/soundfont-player.js"></script>
<button onclick="playDoReMi()">도레미 플레이</button>
<스크립트>
비동기 함수 playDoReMi() {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const 플레이어 = Soundfont.instrument(audioCtx, 'acoustic_guitar_nylon')을 기다립니다.
const 이제 = audioCtx.currentTime;
player.play('C4', 지금); // 수행
player.play('D4', 이제 + 0.5); // 다시
player.play('E4', 이제 + 1); // 미
}
</스크립트>
C4, D4, E4: 도레미를 대표한다.acoustic_guitar_nylon: SoundFont의 기타 톤 (electric_guitar_jazz 등으로 변경 가능)acoustic_guitar_nylonacoustic_guitar_steelelectric_guitar_jazzelectric_guitar_cleanelectric_guitar_mutedoverdriven_guitardistortion_guitarguitar_harmonics사용soundfont-playerWeb Audio API를 사용하면 플러그인을 설치하지 않고도 MIDI 수준의 악기 재생 기능을 쉽게 구현할 수 있습니다. 음색과 음정만 지정하면 '도레미'와 같은 음계 선율을 빠르게 구현할 수 있습니다.
외부 SoundFont를 통해 사운드를 재생할 수 없는 경우 직접 사용할 수 있습니다.Web Audio API~의OscillatorNode신디사이저는 Do Re Mi를 연주하고 기타 스타일을 시뮬레이션합니다(예: 짧은 사운드 + 피아니시모).
<button onclick="playDoReMi()">도레미 플레이</button>
<스크립트>
function playTone(주파수, startTime, 기간, 컨텍스트) {
const osc = context.createOscillator();
const 이득 = context.createGain();
osc.type = "삼각형"; // 기타 사운드에 가까운 합성 파형, "사각형", "톱니형"으로 변경 가능
osc.주파수.값 = 주파수;
Gain.gain.setValueAtTime(0.2, startTime);
Gain.gain.exponentialRampToValueAtTime(0.001, startTime + 기간);
osc.connect(이득);
이득.연결(context.destination);
osc.start(startTime);
osc.stop(startTime + 기간);
}
함수 playDoReMi() {
const context = new (window.AudioContext || window.webkitAudioContext)();
const 지금 = context.currentTime;
// 도레미의 빈도 (C4, D4, E4)
playTone(261.63, 이제, 0.4, 컨텍스트); // C4
playTone(293.66, 이제 + 0.5, 0.4, 컨텍스트); // D4
playTone(329.63, 이제 + 1.0, 0.4, 컨텍스트); // E4
}
</스크립트>
osc.type또는 필터를 추가하여 기타 톤을 시뮬레이션하세요.triangle또는sawtooth파형gain.exponentialRampToValueAtTime()) 따기를 시뮬레이션합니다.순수 웹 오디오 API를 사용하는 것이 가장 안정적이고 호환되는 방법입니다. 고급 요구사항이 있는 경우 필터를 추가하거나, 에코하거나, MIDI 음원을 통합할 수 있습니다.
| osc.type | 중국어 이름 | 음색 특성 | 일반적인 아날로그 계측기 |
|---|---|---|---|
"sine" |
사인파 | 가장 순수하고 고조파가 없음 | 순음, 소리굽쇠, 플루트, 전자합성음 |
"square" |
구형파 | 풍부한 홀수 하모닉스와 날카로운 음색 | 신디사이저, 8비트 사운드 효과, 전자 키보드 |
"sawtooth" |
톱니파 | 두껍고 밝은 톤을 위한 모든 하모닉스를 포함합니다. | 현악기, 기타, 금관 시뮬레이션 |
"triangle" |
삼각파 | 홀수 고조파만, 더 부드러운 소리 | 목관악기, 부드러운 일렉기타 사운드 |
"custom" |
맞춤형 파형 | 사용자 정의 가능한 임의 파형 | 특수 합성 사운드, 실제 아날로그 사운드 |
const osc = audioContext.createOscillator();
osc.type = "톱니"; // "sine", "square", "triangle", "custom"으로 변경 가능
osc.주파수.값 = 440; //A4
osc.start();
const real = new Float32Array([0, 1, 0.5, 0.25]);
const imag = new Float32Array(real.length);
const wave = audioContext.createPeriodicWave(real, imag);
osc.setPeriodicWave(wave);
osc.type = "custom";
다른osc.type다양한 스타일의 악기 소리를 시뮬레이션할 수 있습니다. 기타를 시뮬레이션하고 싶다면 다음부터 시작하는 것이 좋습니다.sawtooth또는triangle엔벨로프, 필터, 에코로 사운드를 시작하고 미세 조정하세요.
사용 권장WebAudioFont이 오픈 소스 JavaScript 라이브러리는 기타 및 기타 악기 사운드를 포함하여 수천 개 이상의 MIDI 사운드를 지원하며 더 나은 음질과 손쉬운 통합을 제공합니다.
'acoustic_guitar_steel''acoustic_guitar_nylon''electric_guitar_clean' ⋯⋯WebAudioFont를 웹 오디오 API와 결합하면 실제 MIDI 사운드(예: 기타)를 쉽게 사용하여 음표를 연주할 수 있으며 단일 순수 오실레이터 합성 사운드 문제를 해결하고 SoundFont 플레이어의 이전 무음 상황을 피할 수 있습니다.
email: [email protected]