diff --git a/public/demo/dxf_3.html b/public/demo/dxf_3.html
index 77ffa5e..2e07edc 100644
--- a/public/demo/dxf_3.html
+++ b/public/demo/dxf_3.html
@@ -44,7 +44,7 @@
             const progress = ((event.loaded * 100) / event.total).toFixed(2);
             console.log(`[Demo] ${type}: ${progress}%`);
         };
-        await viewer.compare(url1, url2, onProgress).then(() => {
+        await viewer.compare({src: url1, modelId: "dxf_3.dxf"}, {src: url2, modelId: "dxf_3_1.dxf"}, onProgress).then(() => {
             console.log(`[Demo] Compared models: ${url1}, ${url2}`);
             if (!viewer.layerManager) {
                 viewer.layerManager = new LayerManager(viewer);
diff --git a/public/demo/dxf_4.html b/public/demo/dxf_4.html
index 65414cc..eecdbac 100644
--- a/public/demo/dxf_4.html
+++ b/public/demo/dxf_4.html
@@ -26,6 +26,7 @@
         }
         #myCanvas3 {
             width: 60%;
+            height: 100%;
             top: 0;
             right: 0;
             position: absolute;
@@ -97,7 +98,7 @@
         };
         await viewer1.loadModelAsync(modelConfig1, onProgress);
         await viewer2.loadModelAsync(modelConfig2, onProgress);
-        await viewer3.compare(url1, url2, onProgress).then(() => {
+        await viewer3.compare(modelConfig1, modelConfig2, onProgress).then(() => {
             console.log(`[Demo] Compared models: ${url1}, ${url2}`);
             if (!viewer3.layerManager) {
                 viewer3.layerManager = new LayerManager(viewer3);